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

Question

I can not go to the Move.js page to page Details.js

I do not understand why I have this response : Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MovieResults

Movie.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>    
        )
    },
});

Answer 1

DOCS

The key should always be supplied directly to the components in the array, not to the container HTML child of each component in the array

So... Add key attribute to the first child <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>    
    )
  }
})