警告：遇到两个使用相同密钥“8e7c86-5982-4e5-88-fcbc65e0”的孩子。键应该是唯一的，以便组件保持其标识

Warning: Encountered two children with the same key, `8e7c86-5982-4e5-88-fcbc65e0`. Keys should be unique so that components maintain their identity

提问人：Huzaifa Bin Zahoor 提问时间：3/15/2023 更新时间：3/15/2023 访问量：32

问：

因此，我有一个结构，我应该在其中克隆用户选择的现有字段。每当我单击克隆按钮时，它都应该自动克隆值。

以下是我逻辑中的几个重要状态

    const [aggData, setAggData] = React.useState(
        {
            id: 11,
            dateFrom: null,
            dateTo: null,
            bucket: null,
            records: [
                { id: KocoUtils.uuidv4(), vehicle: null, signal: null, aggFunc: null},
            ]
        });

    const hanldeCloneRecord = (record) => {
        let newData = _.cloneDeep(aggData);
        newData.records.push(record);
        setAggData(newData);
    };

                                <Button
                                    onClick={() => {
                                        hanldeCloneRecord(record);
                                    }}
                                >
                                    <span className="flex sm:hidden">{'Clone Metric'}</span>
                                </Button>

每当我单击克隆按钮时，都会出现警告，并且它会不断循环，我的程序崩溃。

这里可能有什么错误？

我试图更改newData.record数组的ID，但没有帮助。我也试着分配

aggData.id = KocoUtils.uuidv4()

但没有运气！

reactjs react-redux 警告

评论

1赞 sumowrestler 3/15/2023
你有理由使用克隆深度吗？你能改成吗handleCloneRecordconst handleCloneRecord = (record) => setAggData(prevAggData => ({...prevAggData, records: [...prevAggData.records, {...record, id: KocoUtils.uuidv4()}]}));
0赞 Huzaifa Bin Zahoor 3/15/2023
嗨，我需要 cloneDeep，因为一旦用户单击克隆按钮，我就需要在现有记录下方复制具有相同值的相同记录。
0赞 Huzaifa Bin Zahoor 3/15/2023
@sumowrestler我尝试了您的解决方案，但没有警告。但是，在按下克隆按钮之前，我再次无法克隆我选择的记录。

答： 暂无答案

上一个：如何在NextJs中找到我的警告位置

下一个：了解 React.js 中数组子项的唯一键