React.jsエラー警告:Failed prop type

6178 ワード
テキストリンク

ノマドコードのトイプロジェクトを作成する際に未知のエラーが発生しました.
Googleの検索結果、idというpropがなかったり、propが届いていなかったりした場合に表示されます.
必死に誤字を探した結果...見つからない、ううう、結局あなたのグラス先生のダウンジャケットに貼って、idのほかに、他の道具も間違っていました.
✔Home.js
import { useEffect, useState } from "react";
import Movie from "../components/Movie";
function Home() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const json = await (
      await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
      )
    ).json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      {loading ? (
        <h1>Loading...</h1>
      ) : (
        <div>
          {movies.map((movie) => (
            <Movie
              key={movie.id}
              id={movie.id}
              coverImg={movie.medium_cover_image}
              title={movie.title}
              summary={movie.summary}
              genres={movie.genres}
            />
          ))}
        </div>
      )}
    </div>
  );
}
export default Home;
✔Movie.js
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

function Movie({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>
        <Link to={`/movie/${id}`}>{title}</Link>
      </h2>
      <p>{summary}</p>
      <ul>{genres && genres.map((g) => <li key={g}>{g}</li>)}</ul>
    </div>
  );
}

Movie.propTypes = {
  id: PropTypes.number.isRequired,
  coverImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  genres: PropTypes.arrayOf(PropTypes.string).isRequired,
};
export default Movie;
Movie.jsのprotTypeへのコメント処理でエラーが発生しないことを確認します.
apiのjsonに抜けた部分があり、資料の種類が違うので違うのか分からないので、一番いい方法はコードを外して、このようにエラーを解消することだと思います
[Ava]モノトーンパターン
MatTestをインストールするための完全な解決:Matterest Omnibusの導入