React - 列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React - Each child in a list should have a unique "key" propReact - 列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2020-01-24 04:48:23
【问题描述】：

在我的反应组件中，我的 UI 加载完美，但有控制台错误，我想修复错误说 - 'Each child in a list should have a unique "key" prop' 下面的代码。指导我如何将密钥传递给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>
    );
}

为更清晰添加了标题、正文代码。

【问题讨论】：

我以前从未使用过这样的地图，但是像这样更改看看是否有效？ const detailsContent = [header, HorizontalLine, body].map( currentComponent =>
currentComponent
);
它不太可能起作用，只是说一个想法

标签： javascript reactjs

【解决方案1】：

列表中的每个孩子都应该有一个唯一的“关键”道具

如果使用组件而不是普通的 jsx 元素，只需将 key 属性添加到 currentComponent jsx。请注意，为简单起见，我只是使用 index 作为键。

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

See CodeSandbox

使用元素请参考the accepted answer。

【讨论】：

我认为数组中的项目是实例，您不能将它们用作<CurrentComponent .../>
如果它是一个元素（而不是一个组件）？你假设header是一个函数还是一个元素（例如<div>header text</div>？原代码不清楚，一方面map函数使用名称currentComponent，另一方面，项目没有大写（ [Header, Line, Body])
@Meir，我假设数组中的所有项目都返回一个 JSX。唯一的问题是名称currentComponent 应该是CurrentComponent。无论哪种方式，问题都是如何传递密钥。 :D
我同意问题在于添加键，但如果元素不能像这样使用，只能使用组件，因此，JSX 元素不能使用<CurrentComponent/> 语法“重新实例化”。我查看了您的示例，它与组件有关，问题可能与元素有关，在这种情况下，您需要克隆它并添加一个键
@Meir，I agree with you。 +1 为您对元素的回答。

【解决方案2】：

您可以使用React.cloneElement添加密钥

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

【讨论】：

+one 为您提供帮助和解答。