警告：flattenChildren（...）：遇到两个孩子在同一个键阵营Mobx组件

Question

我得到我的MobX这个错误进行响应组件：

Warning: flattenChildren(...): Encountered two children with the same key, `1:$8`. Child keys must be unique; when two children share a key, only the first child will be used. 

，如果我加载此不显示此错误信息第一次路线。

这里是我的全部成分：

@observer 
export default class Posts extends React.Component { 

    componentDidMount(){ 
     this.props.route.posts.getPosts(); 
    } 

    hiren() { 
     var bunny = []; 
     (this.props.route.posts.posts).map(function (data) { 
      bunny.push(
       <div className="post-preview" key={ data.id }> 
        <Link to={'/dashboard/posts/' + data.id + '/'}> 
         <h2 className="post-title"> 
          {data.title} 
         </h2> 
        </Link> 
        <p className="post-meta">Posted on {data.date}</p> 
       </div> 
      ) 
     }); 
     return (
      <div> {bunny} </div> 
     ); 
    } 

    render() { 

     if(this.props.route.posts.loaded){ 
      return (
       <div className="posts"> 
        <div className="container"> 
         <div className="row"> 
          <div className="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> 

           {this.hiren()} 
          </div> 
         </div> 
        </div> 

       </div> 
      ) 
     } 
     return (

      <div> 
       <h3>{this.props.route.posts.loadingText} </h3> 
      </div> 
     ) 

    } 
} 

，这里是我的mobx店：

export class Diary { 
    @observable loaded = false; 
    @observable searching = false; 
    @observable posts = []; 
    @observable post = {} ; 
    @observable loadingText = 'Loading from remote server....'; 
    @observable pageId = 0; 

    @action getPosts() { 
     axios({ 
      method: 'get', 
      url: '/api/diary/', 
      headers: {'Authorization': "JWT " + sessionStorage.getItem('token')} 
     }).then(action('response action', (response) => { 
      this.loadingText = 'Decrypting data...'; 
      (response.data).map(function (post) { 
       let key = forge.pkcs5.pbkdf2(sessionStorage.getItem('key'), 
        forge.util.hexToBytes(post['salt']), 100, 16); 
       let hiren = {}; 
       hiren['id'] = post['id']; 
       hiren['title'] = Crypt.decrypt(post['title'], key, post['iv']); 
       hiren['content'] = Crypt.decrypt(post['content'], key, post['iv']); 
       hiren['tag'] = post['tag']; 
       hiren['date'] = moment.utc(post['date']).local().format("dddd, DD MMMM YYYY hh:mm:ss A"); 
       this.posts.push(hiren); 
      }.bind(this)); 
      this.loaded = true; 
     })).catch(function(err) { 
      console.error(err); 
      sweetAlert("Oops!", err.statusText, "error"); 
     }); 
    } 

我想分量后得到的数据的新副本mounting.May是，这就是为什么我越来越这个错误。有没有更好的方法？

Answer 1

您习惯了以前的错误，当您将相同的键分配给多个元素时，动态创建的元素需要唯一的键。

From Facebook React Doc：

键帮助阵营识别哪些项目已经改变，添加或移除。应该给数组内的元素赋予元素一个稳定的标识。如果您没有渲染项目的稳定ID，则可以使用项目索引作为关键字。在阵列中使用的键在他们的兄弟姐妹中应该是唯一的。但是，他们不需要全球独一无二。当我们生成两个不同的数组时，我们可以使用相同的密钥。

解决此问题的一种方法是，使用数组中的项索引，该键将始终是唯一的。试试这个：

hiren() { 
    //var bunny = []; 
    return this.props.route.posts.posts.map((data, index) => { 
     return(
      <div className="post-preview" key={ index }> 
       <Link to={'/dashboard/posts/' + data.id + '/'}> 
        <h2 className="post-title"> 
         {data.title} 
        </h2> 
       </Link> 
       <p className="post-meta">Posted on {data.date}</p> 
      </div> 
     ) 
    }); 
    //return (
    // <div> {bunny} </div> 
    //); 
}