ReactJS - 传递一个对象数组的元素作为道具

我正在构建一个反应应用程序。我有一个状态数组，其中包含博客数组。我使用BlogDisplay组件呈现每个博客。以下是我的代码：ReactJS - 传递一个对象数组的元素作为道具

render() { 
     for(var i = 0;i < this.state.blogData.length;i++){ 
      blogDataToRender.push(<BlogDisplay blogData = {this.state.blogData[i]} onUserTriggerForDetailedView ={this.props.onUserTriggerForDetailedView}/>); 
     } 
     return (
      <div> 
       {blogDataToRender} 
      </div> 
     ); 
    }

我得到这样的警告：

index.js:5279 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `BloggerHome`. See https://facebook.github.io/react/docs/lists-and-keys.html#keys for more information. 
in BlogDisplay (created by BloggerHome) 
in BloggerHome (created by Blogger) 
in div (created by Blogger) 
in div (created by Blogger) 
in Blogger

是我的模型是否正确？我该如何解决这个问题？

非常感谢。

来源

2017-06-25 Varbi

我试过了，但是不成功。可能是因为我的新手知识。你能提供一个代码示例吗？ – Varbi

您需要添加一个key每个BlogDisplay组件：

for(var i = 0;i < this.state.blogData.length;i++){ 
    blogDataToRender.push(<BlogDisplay key={i} blogData = {this.state.blogData[i]} onUserTriggerForDetailedView ={this.props.onUserTriggerForDetailedView}/>); 
}

的key是孩子的重要部件在数组中。因为当其中一个子组件正在运行时，React需要key来确定哪个组件正在运行。另外，当源数组数据更改时，React需要key来检查组件的差异。

有关密钥为什么必要的详细说明，请参阅官方document。

对于每个子部件，应该是什么值key？

根据上述文件：

的关键只要是它的兄弟姐妹中是独一无二的，而不是全局唯一的。

另外，如果源数据中存在唯一标识，则blogData[i].id是最佳选择。如果子组件将重新排序（性能问题），则不建议像上述示例中那样使用索引。

来源

2017-06-25 06:07:19 shaochuancs

React中的每个元素都需要一个唯一的键，React用它来标识它。当你公然渲染一个元素时，React会自动分配一个元素。但是，当您分配一个ARRAY元素时，该数组中的每个元素默认都没有分配一个键，所以您需要。类似这样的：

blogDataToRender.push(<BlogDisplay key={i} blogData={this.state.blogData[i]} onUserTriggerForDetailedView={this.props.onUserTriggerForDetailedView}/>);

来源

2017-06-25 06:07:56 Jayce444

查看Chris的回复Understanding unique keys for array children in React.js。

要解决这个问题，您必须为每个元素设置一个唯一的id，然后为每个元素添加一个关键支柱。您可以阅读更多关于React如何使用键来标识列表中的元素的信息in the official documentation。

这是你的render()方法应该是什么样子：

render() { 
    return (
     <div> 
      {this.state.blogData.map((item) => { 
       return (<BlogDisplay key={item.id} blogData={item} onUserTriggerForDetailedView={this.props.onUserTriggerForDetailedView} />) 
      })} 
     </div> 
    ); 
}

来源

2017-06-25 06:08:39

要回答你的问题很快所有你需要做的是读取错误并修复它！一个唯一键值为每个组件添加像这样：

... 
    for(var i = 0;i < this.state.blogData.length;i++){ 
    blogDataToRender.push(
     <BlogDisplay 
     key={this.state.blogData[i].id} 
     blogData={this.state.blogData[i]} 
     onUserTriggerForDetailedView{this.props.onUserTriggerForDetailedView} 
    /> 
    ); 
    } 
...

在这种情况下，我认为你的博客文章中的每一个都有一个唯一的ID，你需要知道这里的事情是，key值需要是唯一的，而不取决于该元素在数组内的位置。每次渲染这些键都需要相同的元素时，React会使用此值来优化重新渲染并避免渲染项目不会发生变化。如果你想明白为什么这是必要的，这是一个很好的link。下次我建议阅读文档，因为它们做得非常好，你可以从中学到很多东西。

现在我会做的方式是使用map：

... 
    const blogDataToRender = this.state.blogData.map(blogData => 
     <BlogDisplay 
     key={blogData.id} 
     blogData={blogData} 
     onUserTriggerForDetailedView{this.props.onUserTriggerForDetailedView} 
    /> 
    ); 
...

这有助于可读性和利用迭代器，所以你不需要跟踪指数。这是在React中开发时广泛使用的模式。

来源

2017-06-25 06:13:06 G4bri3l

ReactJS - 传递一个对象数组的元素作为道具

回答

相关问题