警告:flattenChildren(...):遇到两个具有相同键的子项/子键必须是唯一的

Question

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

警告:flattenChildren(...):遇到两个孩子用同一把钥匙,element-id-50.子键必须是唯一的; 当两个孩子共用一把钥匙时,只会使用第一个孩子.

(上面使用的数字50只是一个例子,每次使用不同的id时,它会抛出此错误~40次)

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

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

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

因为每次我要去另一个屏幕时,这个组件都会卸载,然后在我回来时重新安装.

当receiveSkySetup完成后,render在功能上sky.js产生了一堆的div称为SectorS和各Sector创建一些div的名为Slot秒.

然后在里面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],
        };

也许在那里的东西导致计数加倍？

Answer 1

这里的问题是

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

即,visibleElements(和unplacedElements值).

[...state.visibleElements, ...visibleIds]将连接2个数组,因为每次我回到Sky选项卡时都会遇到此代码,它会将新的ID添加...visibleIds到我已经拥有的数组中...state.visibleElements,并将值加倍