警告：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> 
    //); 
}