Question

我无法前往Move.js页面查看Details.js

我不明白为什么会有这样的响应：警告：数组或迭代器中的每个子节点都应该有一个唯一的“键”支柱。检查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

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

所以...将键属性添加到第一个孩子<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>    
    )
  }
})

警告：数组或迭代器中的每个子节点都应该具有唯一的“键”支柱。检查`MovieResults`

1 个答案: