javascript - 警告: flattenChildren(…): Encountered two children with the same key/Child keys must be unique

昨天我在项目中添加了react-router-dom，现在当我离开并回到导航中的Sky元素时，它重新加载了天空，我得到了



(上面使用的数字50仅是示例，每次使用不同的ID都会引发此错误〜40次)

问题似乎源于我的sky.js文件:

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

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

由于每次我要转到另一个屏幕时，此组件都会先卸载，然后在我回来时重新安装。
receiveSkySetup完成后，render中的sky.js函数将创建一堆称为Sector的div，每个Sector将创建一些名为Slot的div。

然后在Slot.render内部，我有:

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>
        );

上面的key调用中的SkyElement元素在每次安装时都会引发40多个错误。

乐于在需要时提供更多代码。

任何帮助将大有帮助。谢谢!

编辑:控制台日志记录元素

再挖一点，我商店里的商品就增加了一倍。

因此，在sky标签的第二个渲染中，元素ID的完整列表为["0", "1", "2", "3", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "77", "78", "0", "1", "2", "3", "4", "5", "6", "7", "17", "18", "19", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "77", "78"]
在第3个渲染中，元素0-78(从上面的数组应用的ID)将再次添加到数组中

用Slot.js

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

此处的elements将为n乘以Sky完成的加载次数。

用sky.js

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

打印elements.length我也看到它们也在这里加倍。 Slot.js从同一家商店中提取，因此很有意义

在我的elements/reducer.js中

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(和unplacedElements值)。
[...state.visibleElements, ...visibleIds]将合并2个数组，因此，由于每次我回到Sky选项卡时都会击中此代码，因此它将...visibleIds中的新id添加到了我已经在...state.visibleElements中拥有的数组中，并且将值加倍