反应错误独特的“关键”道具。虽然 key 是唯一的答案

【问题标题】：React Error unique "key" prop. Although key is unique反应错误独特的“关键”道具。虽然 key 是唯一的
【发布时间】：2020-07-24 09:50:46
【问题描述】：

我将列出电影列表并展示它们。每部电影都有一个唯一的值，称为 id，我想用它作为键。
但发生错误：index.js:1 警告：列表中的每个子项都应具有唯一的“键”属性。

--- 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;

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

因为我在父组件的useEffect中改变了状态，所以渲染了两次。

【问题讨论】：

ID不是唯一的，都是重复两次的，是多次渲染循环的原因吗？我建议您将 key prop 设置为数组中电影的 ID 和索引的组合。
你确定调试器是指这个类吗？看起来它在 MovieList 中，而不是 Movie：Log:"in Fragment created by MovieList" 和 "Check render method of 'MovieList'"
其实MovieList中使用的地图有错误。非常感谢

标签： reactjs react-key-index

【解决方案1】：

您在该地图中使用的 Key 看起来没问题。

您截取的错误表明它在另一个组件中，MovieList，它的Fragments 没有唯一键。去看看那个文件吧。

【讨论】：