Question

我正在构建一个React Application.I有一个包含博客数组的状态数组。我使用BlogDisplay组件渲染每个博客。以下是我的代码：

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

我的模特是否正确？我怎么能纠正这个？

非常感谢。

Answer 1

您需要为每个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值应该是多少？

根据上述文件：

关键只需要在兄弟姐妹中独一无二，而不是全球唯一。

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

Answer 2

React中的每个元素都需要一个唯一的密钥，React使用它来识别它。当你只是公开渲染一个元素时，React会自动指定一个元素。但是，当您分配ARRAY元素时，默认情况下，该数组中的每个元素都没有分配键，因此您需要。像这样：

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

Answer 3

查看Chris＆＃39;回复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>
    );
}

Answer 4

要快速回答您的问题，您需要做的就是阅读错误并修复它！为每个组件添加唯一键值，如下所示：

...
  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中开发时，它是一种广泛使用的模式。

ReactJS - 将一个Object数组的元素作为props传递

4 个答案: