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

Question

在我的react组件中，我的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>
    );
}

添加了标题和正文代码，以提高清晰度。

Answer 1

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

如果使用组件而不是普通的jsx元素，只需key向currentComponentjsx 添加一个prop 。请注意，为简单起见，我仅将其index用作键。

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

参见CodeSandbox

使用元素，请参阅下面的Meir答案。