警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查`MovieResults`的渲染方法

Posted 2023-02-22

【中文标题】警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具。检查`MovieResults`的渲染方法

【英文标题】：Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `MovieResults`

【发布时间】：2016-12-07 19:59:49

【问题描述】：

我无法将 Move.js 页面转到 Details.js 页面

我不明白我为什么会有这样的回应：警告：数组或迭代器中的每个孩子都应该有一个唯一的“关键”道具。查看MovieResults的渲染方法

电影.js：

var Movie = React.createClass(
    render: function()
        var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;
        var myLink = 'search/' + this.props.movie.imdbID;

        return(
            <div className="well">
                <div className="row">
                    <h4 className="text-center">
                        <Link to=myLink activeClassName="current">this.props.movie.Title</Link>
                    </h4>
                </div>


            </div>    
        )
    ,
);

Details.js：

var Details = React.createClass(
    render: function()

        var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;

        var title = this.props.movie.Title;
        var year = this.props.movie.Year;
        var type = this.props.movie.Type;
        var poster = this.props.movie.Poster;
        var imdbID = this.props.movie.imdbID;

        return(
            <div className="well">
                <div className="row">
                    <div className="col-md-4">
                        <img className="thumbnail" src=poster /> 
                    </div>
                    <div className="col-md-8">
                        <h4><a href=this.props.movie.Title> title</a></h4>
                        <ul className="padding">
                            <li className="list-group-item">Type : type</li>
                            <li className="list-group-item">Year Released : year</li>
                            <li className="list-group-item">Id imdb : imdbID</li>
                        </ul>
                        <a className="btn btn-primary" href=link>View on IMDB</a>
                    </div>
                </div>
                <Movie movie=this.props.Details key=i />
            </div>    
        )
    ,
);

【问题讨论】：

您能显示MovieResults 组件吗？

【参考方案1】：

DOCS

应始终将密钥直接提供给 数组，而不是数组中每个组件的容器 html 子项

所以...将 key 属性添加到第一个孩子 <div>

var MovieResults = React.createClass(
  render: function()
    return(
      <div>
        <h3 className="text-center"> Results </h3>
        
          this.props.movies.map(function(movie, i)
            return(
              <div key=i>
                <Movie movie=movie/>
              </div>
            )
          )
        
      </div>    
    )
  
)