React Error 独特的 "key" 道具。虽然key是唯一的

Question

我要拍一个电影清单放映。每部电影都有一个名为 id 的唯一值，我想将其用作键。
但发生错误：index.js:1 警告：列表中的每个 child 都应该有一个唯一的“键”属性。

--- Skip ---

const Movie = ({
  movies,
  loading,
  nameSearch,
  setNameSearch,
}: MovieProps) => {
  let filterdMovieList: MovieType[] = [...movies];
  if (nameSearch) {
    filterdMovieList.sort();
    filterdMovieList = filterdMovieList.filter((movie: MovieType) => {
      return (
        movie.title.toLowerCase().indexOf(nameSearch) > -1 ||
        movie.title.toUpperCase().indexOf(nameSearch) > -1
      );
    });
  }
  return (
    <div className="movie">
      <MovieSearch setNameSearch={setNameSearch} nameSearch={nameSearch} />
      <div className="movie-container">
        {filterdMovieList.map((movie: MovieType) => {
          {
            console.log(movie.id);
          }
          return <MovieList movie={movie} key={movie.id.toString()} />;
        })}
        {loading && <MovieLoading />}
      </div>
    </div>
  );
};

export default Movie;

我不明白这个错误。
当我登录时，结果是这样的。

它被渲染了两次，因为我在 parent 组件的 useEffect 中更改了状态。

Answer 1

你在那张地图中对 Key 的使用看起来没问题。

您截图的错误表明它在另一个组件 MovieList 中，该组件 Fragment 没有唯一键。请转而查看该文件。

React Error 独特的 "key" 道具。虽然key是唯一的

React Error unique "key" prop. Although key is unique

reactjs

react-key-index