React - 列表中的每个子项都应该有一个唯一的 "key" 属性

Question

在我的React组件中，UI加载完美，但是在控制台中出现了错误，我想要修复这个错误，错误提示为-“在列表中的每个子项应该有一个唯一的“key”属性”，针对下面的代码，请指导我如何将键传递给 detailsContent。

render() {
    const header = (
        <div className={css.deviceDetailsBody}>
            <div className="sidebar__header">
                <div className="sidebar__title">
                    <div>
                        {hostname}
                        {this._renderCloser()}
                        <div className={"sidebar__subtitle"}>
                            <div className="toolsBar">
                                <div className="toolsBarlet">
                                    <div className="toolsItemNarrow">{deviceTypeView}</div>
                                    {complianceStatusView}
                                    <div className="toolsItemNarrow">{managementIpAddress}</div>
                                    {deviceUpTime}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
    const horizontalLine = <div className="sidebar__horiz_line" />;
    const body = (
        <div className="body">
            {tabs}
            {tools}
        </div>
    );

    const detailsContent = [header, horizontalLine, body].map(
        currentComponent => currentComponent
    );

    return (
        <div>
            {sideBarShow && (
                <Sidebar {...sidebarProps}>
                    <div>{detailsContent}</div>
                </Sidebar>
            )}
        </div>
    );
}

为了更加清晰，添加了头部和正文代码。

- Javascript Coder

---

我以前从未像这样使用过map，但是改成这样看看是否有效呢？ const detailsContent = [header, horizontalLine, body].map(currentComponent => <div key={currentcomponent}>currentComponent</div>); - behzad

不太可能会成功，只是提出一个想法而已。 - behzad

Answer 1

列表中的每个子项都应该拥有一个唯一的“key”属性。

如果使用组件而不是普通的jsx元素，请在当前组件的jsx中添加一个“key”属性。为了简单起见，我只是用了“index”作为key。

const detailsContent = [header, horizontalLine, body].map(
  (CurrentComponent, index) => (<CurrentComponent key={index} />)
);

查看 CodeSandbox

使用元素，请参考被接受的答案。

- Joseph D.

---

如果它是一个元素（而不是组件），你会怎么做？你认为 header 是一个函数还是一个元素（例如 <div>header text</div>）？原始代码并不清楚，一方面，map 函数使用了名称 currentComponent，另一方面，项目没有大写 ([Header, Line, Body])。 - Meir

@Meir，我同意你的观点（https://codesandbox.io/embed/holy-sea-opk2e）。对于元素的回答给你点赞。 - Joseph D.

@JosephD。它说不变式违规：元素类型无效：预期为字符串 检查渲染方法 上述错误发生在<div>组件中： - Javascript Coder

@JavascriptCoder，根据更新的代码，您正在使用元素。请查看先前的评论以了解如何使其正常工作。即Meir的答案是您应该使用元素来解决此问题的方法。 - Joseph D.

@JosephD. 感谢您的回答和帮助，点赞 +1。 - Javascript Coder

Answer 2

您可以使用 React.cloneElement 来添加键值。

const detailsContent = [header, line, body].map(
  (element, index) => React.cloneElement(element, {key: index})
);

- Meir

---

感谢您的帮助和回答。 - Javascript Coder

嘿，如果还有一个类似的组件，并且它具有相同的键，那么会不会出现问题？我们该如何解决这个问题？ - Ozan Mudul

@OzanMudul 不知道，但你可以在 StackBlitz 或 CodeSandbox 上快速检查。 - Meir