React保留上次渲染的子项

Question

我有问题渲染页面基于存储在redux中的模板数组。我无法提供实际的代码，因为它太复杂，无法在沙箱中重现，但我会尝试简化结构。

我有pinterest样式的网格，基于flex-grow和js计算每个项目的尺寸，所以我需要将所有这些都放在一个容器中。

我在同一个div中有3组项目：

blank_item + templates.map + tailItems.map

<div className="grid">
    {shouldRenderBlankItem && <BlankItem />}
    {templates.map((template) => (
        <Template
            key={template.uuid}
            template={template}
        />
    ))}
    {shouldRenderTail &&
        tailItems.map(item, i) => (
            <TailItem
                key={i}
                item={item}
            />
        ))}
</div>

问题是-有时在渲染之后，我会从之前的渲染中获得额外的子元素，React会将它们放在div.grid中其他元素的前面，所以我得到的结果将如下所示：

3-4 of EXTRA <Template/> + blank_item + templates.map + tailItems.map

作为模板的键，我使用来自后端的template.uuid，我知道它们是唯一的，react也不会对重复的键显示任何警告-所以我知道我没有从API得到任何重复的项，我认为这可能是一个问题。

Redux很好-我看到了正确数量的templates，比如50个，grid和react开发工具在我检查父组件时显示了同样的50个模板，但实际的DOM在同一时刻有53个元素。

我怎么能像这样调试问题呢？我认为在调和过程中出现了一些问题，但我不知道从哪里开始调试。

我有React/ReactDOM 16.13.1

Answer 1

好的，在我的例子中，问题出在后端api被破坏了，它可能会返回相同的模板两次，所以我用来表示键的uuid对于每个模板来说都是唯一的，但是它们在页面和DOM元素方面并不是唯一的。

我只在生产版本中遇到了这个问题，这就是为什么我没有duplicated key警告(在开发版本中，我有另一个具有更少模板的DB，所以我无法重现它)。

因此，任何面临类似问题的人:去检查你的密钥在页面中是否真的是唯一的，因为加载新模板后会发生什么：

1. React想要删除旧的项
2. 它为每个键搜索相应的DOM元素，找到带有key="XXX"的项，并从DOM中删除它
3. 它们的重复项在DOM中保留为相应的键被处理，React不再关心这个特定的键
4. 我们加载新的模板，它们被附加到父DOM在新加载的

之前，我们有旧项目

我在这里所做的-我现在的关键是：

templates.map((template, i) => <Template key={template.uuid + i} />

所以在这种情况下，即使后端返回重复的项目，我也是安全的。当然，我们也会修复后端。感谢您的阅读和帮助！

快速示例如何在data中搜索具有相同id的项目

var duplicates = new Set();
data.map(t => t.id).forEach((id, i, arr) => {if(arr.filter(item => item == id).length > 1){
duplicates.add(id);
}});
console.log("DUPLICATED IDs:", duplicates)