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函数会创建一堆名为Sector的div，每个Sector会创建一些名为{的{div} {1}}秒。

然后在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元素是每次安装时丢失40多个错误的原因。

如果需要，很高兴提供更多代码。

任何帮助都会非常有帮助。谢谢！

编辑：控制台记录元素

进一步挖掘，这些物品在我的店里翻了一倍。

因此，在SkyElement标签的第二次渲染中，元素ID的完整列表为sky

在第3次渲染时，元素0-78（从上面的数组应用的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"]

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'), }; };我看到他们也加倍了。 Slot.js从同一家商店拉出来，所以这很有意义

在我的elements.length

中

elements/reducer.js

也许有什么东西导致计数加倍？

Answer 1

这里的问题是

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

即visibleElements（和unplacedElements值）。

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

警告：flattenChildren（...）：遇到两个具有相同键的子项/子键必须是唯一的

1 个答案: