Javascript 警告：FlattChildren（…）：遇到具有相同密钥的两个子项/子密钥必须唯一

昨天我在我的项目中添加了

react router dom

，现在当我离开并回到导航中的

Sky

元素时，它会重新加载Sky，我得到

警告：FlattChildren（…）：遇到两个具有相同密钥的子项，

element-id-50

。子密钥必须是唯一的；当两个子项共享密钥时，将只使用第一个子项

（上面使用的数字50只是一个示例，每次都会使用不同的ID抛出此错误约40次）

问题似乎源于我的

sky.js

文件：

componentWillMount() {
    this.props.dispatch(requestSkySetup());
    this.props.dispatch(requestAllElements());

    this.setState({loadedSky: true, loadedElements: true});
}

因为每次我进入另一个屏幕时，这个组件都会卸载，然后在我回来时重新安装

当

receiveSkySetup

完成时，

sky.js

中的

render

函数创建一组名为

Sector

s的div，每个

Sector

创建几个名为

Slot

s的div

然后在

槽内。渲染
我有：

return connectDropTarget(
            <div className={showOutline ? 'slot showOutline' : 'slot'} style={style} onClick={interactable ? this.handleClick : null}>
                {
                    elements
                        .map(e => (
                            <SkyElement
                                id={e.id}
                                key={`element-id-${e.id}`}
                                title={e.title}
                                size={150}
                                opacity={e.opacity}
                                glow={e.glow}
                                color={e.color}
                                sectorId={e.sectorId}
                                slotId={e.id}
                                dispatch={this.props.dispatch}
                                isDragging={false}
                                transformElement={false} />
                        ))
                }
            </div>
        );

元素
这里将是
n
乘以
Sky
已完成的加载次数

在
sky.js中

const mapStateToProps = ({elements}, ownProps) => {
    return {
        elements: getElementsBySlotId(elements, ownProps.id),
    };
};

const mapStateToProps = ({sky, elements}) => {
    return {
        sectors: getSky(sky).sectors,
        elements: getElementsByKeyName(elements, 'visibleElements'),
        unplacedElements: getElementsByKeyName(elements, 'unplacedElements'),
    };
};

case 'receiveAllElements':
        const visibleElements = {};
        const unplacedElements = {};

        const elements = action.elements.reduce((result, index) => {
            result[`${index.id}`] = index;
            return result;
        }, {});

        const keys = Object.keys(elements);
        for (const key of keys) {
            const e = elements[key];

            if (e.sectorId === null) {
                unplacedElements[key] = e;
            } else {
                visibleElements[key] = e;
            }
        }

        const visibleIds = Object.keys(visibleElements);
        const unplacedIds = Object.keys(unplacedElements);
        console.log(visibleIds);
        console.log(unplacedIds); // logging these, the numbers are consistent and don't double, triple etc with each load

        return {
            ...state,
            elementsMap: {
                ...state.elementsMap,
                ...elements,
            },
            visibleElements: [...state.visibleElements, ...visibleIds],
            unplacedElements: [...state.unplacedElements, ...unplacedIds],
        };

打印
元素。长度
我看到它们在这里也加倍了。Slot.js来自同一家商店，所以这是有意义的

在my
elements/reducer.js中

const mapStateToProps = ({elements}, ownProps) => {
    return {
        elements: getElementsBySlotId(elements, ownProps.id),
    };
};

const mapStateToProps = ({sky, elements}) => {
    return {
        sectors: getSky(sky).sectors,
        elements: getElementsByKeyName(elements, 'visibleElements'),
        unplacedElements: getElementsByKeyName(elements, 'unplacedElements'),
    };
};

case 'receiveAllElements':
        const visibleElements = {};
        const unplacedElements = {};

        const elements = action.elements.reduce((result, index) => {
            result[`${index.id}`] = index;
            return result;
        }, {});

        const keys = Object.keys(elements);
        for (const key of keys) {
            const e = elements[key];

            if (e.sectorId === null) {
                unplacedElements[key] = e;
            } else {
                visibleElements[key] = e;
            }
        }

        const visibleIds = Object.keys(visibleElements);
        const unplacedIds = Object.keys(unplacedElements);
        console.log(visibleIds);
        console.log(unplacedIds); // logging these, the numbers are consistent and don't double, triple etc with each load

        return {
            ...state,
            elementsMap: {
                ...state.elementsMap,
                ...elements,
            },
            visibleElements: [...state.visibleElements, ...visibleIds],
            unplacedElements: [...state.unplacedElements, ...unplacedIds],
        };

也许有什么原因导致计数加倍？
这里的问题是

    return {
        ...state,
        elementsMap: {
            ...state.elementsMap,
            ...elements,
        },
        visibleElements: [...state.visibleElements, ...visibleIds],
        unplacedElements: [...state.unplacedElements, ...unplacedIds],
    };

即，
visibleElements
（和
unplaceelements
值）

[…state.visibleElements，…visibleIds]
将包含2个数组，因此，由于每次我返回
Sky
选项卡时都会命中此代码，因此它会将
…visibleIds
中的新ID添加到我已处于
状态的数组中。visibleElements
和加倍值
您是否尝试过
.map（（e，索引）=>（
和
键={index}
？我还没有，但我不确定这会有什么不同。例如，当我卸载并重新装载Sky元素时，element-id-50会再次抛出错误，如果我重复，错误将在50秒内再次发生。我想象同样的情况会发生，indexIs每个插槽呈现相同的
元素
？每个插槽呈现一个uniq元素或元素集。没有重叠。您能否更新元素数组的填充方式？