Question

ReactJS - 将对象数组的元素作为 props 传递

2017-06-25

2627

javascript reactjs ecmascript-6

我正在构建一个 React 应用程序。我有一个状态数组，其中包含博客数组。我使用 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

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

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 来检查组件的差异。

关于为什么需要 key 的深入解释，请参考官方文档。

每个子组件的 key 值应该是什么？

根据上述文档：

The key only has to be unique among its siblings, not globally unique.

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

Answer 2

React 中的每个元素都需要一个唯一的键，React 用它来识别它。当您直接渲染元素时，React 会自动分配一个键。但是，当您分配元素数组时，默认情况下不会为该数组中的每个元素分配一个键，因此您需要这样做。如下所示：

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

Answer 3

查看 Chris 对了解 React.js 中数组子项的唯一键的回复。

要解决此问题，您必须为每个元素设置一个唯一的 id ，然后向每个元素添加一个 key prop。您可以在官方文档中阅读有关 React 如何使用键来识别列表中的元素的更多信息。

您的 render() 方法应如下所示：

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