列表中的每个孩子都应该有一个唯一的“关键”道具——但我有一个？答案

【问题标题】：Each Child in a list should have a unique "key" prop - but I have one?列表中的每个孩子都应该有一个唯一的“关键”道具——但我有一个？
【发布时间】：2021-11-17 20:15:44
【问题描述】：

我收到错误“列表中的每个孩子都应该有一个唯一的 'key' 道具”错误，但我很困惑，因为我试图将密钥设置为唯一 ID，而且似乎是不工作。我使用 imdbID 作为键，它应该是一个主键值（唯一且稳定）。是我的语法错误，还是我在做什么不正确？

import React from 'react';
import "./movie.css";

class Movie extends React.Component {
   render() {
       const {Title, Poster, Year, imdbID} = this.props;

       return (
           <div className="movie" key={imdbID} id={imdbID}>
               <div className="title-year">
                   <h1 className="title">{Title}</h1>
                   <h2 className="year">{Year}</h2>
               </div>
               <div className="poster">
                   <img src={Poster} alt="my movie poster"/>
               </div>
           </div>
       )
   }
}

export default Movie;

以下是将插入应用程序 (app.js) 的代码：

 render() {
   return (
     <div className="App">
       <header className="App-header">
         <Search handleSendRequest={this.sendRequest}/>
         <div className="response">
          {
          this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => {
            return <Movie {...movie}/>
          })
          : null
          }
          
        </div>
       </header>
     </div>
   );
 }

【问题讨论】：

应用键组件，您将在其中映射 this.state.movies

标签： javascript reactjs

【解决方案1】：

将key 属性添加到您的电影标记并设置唯一值。如下

{
  this.state.movies && this.state.movies.length ? this.state.movies.map((movie, index) => {
      return <Movie key={movie.imdbID} { ...movie
      }
      />
    }) :
    null
}

【讨论】：

我不知道电影属性，所以我使用了index。你的评论。 @亚当
已修改。 @亚当
我进行了此更新，但我仍然收到警告。 { this.state.movies && this.state.movies.length ? this.state.movies.map((movie, index) => { return }) : null }
没关系——在这里发布代码让我看到我在 imddID 上有一个错字，应该是 imdbID。谢谢！

【解决方案2】：

您需要<Movie/> 本身的密钥：

      {
      this.state.movies && this.state.movies.length ? this.state.movies.map((movie) => {
        return <Movie key="HERE" {...movie}/>
      })
      : null
      }

特别是，每次迭代对象时都需要一个键。在这种情况下，您正在迭代 this.state.movies。

您不需要在 Movie 的渲染函数中放置密钥，因为此时您没有迭代任何对象。

【讨论】：

【解决方案3】：

'key' 属性应该插入到<Movie/> 组件中，而不是在里面的 div 中。

【讨论】：