Javascript 在每次重新渲染时，为元素列表中的每个“null”添加一个新项

如果要在数组上映射以渲染元素，并且在生成的元素数组中有一个

null

，然后有两个或多个具有相同键的项，则在每次重新渲染时，React将向DOM添加另一个元素，类似于这两个元素

以下是复制的最低代码：

const LIST = [{ id: 2, done: true },{ id: 1 },{ id: 1 }];

function App() {
  const forceUpdate = React.useState()[1];
  return LIST.map(({ id, done }, i) => {
    if (done) {
      return null;
    }
    return (
      <p key={id} onMouseEnter={forceUpdate}>
        Index: {i}
      </p>
    );
  });
}

const LIST=[{id:2，done:true}，{id:1}，{id:1}]；
函数App（）{
const forceUpdate=React.useState（）[1]；
返回LIST.map（{id，done}，i）=>{
如果（完成）{
返回null；
}
返回(

索引：{i}

);
});
}

下面是CodeSandbox上用于玩它的相同代码：

请注意，当您将鼠标悬停在列表上（从而导致重新渲染）时，React会向生成的DOM添加一个额外的元素

可通过以下任一方法避免该问题：

• 确保唯一id

• 将所有

  null

  元素移动到列表末尾

• 确保没有

  null

  元素

---

我知道React不支持具有相同键的元素，并且警告使用这些元素可能会导致错误，但我仍然想知道到底是什么原因导致了这种情况？对JSX和React有深入了解的人能给我解释一下吗？

我相信React使用键来识别要更新的组件，因为索引：1

---

和Index:2都有相同的键，它会混淆要修改的键，因此它会查看第二个（该键的最后一次出现）在本例中Index:2，并将其替换为新的重新呈现数据

JavaScript的数组。map（）函数将返回具有相同项数的数组，无论任何项是空的还是空的。沙盒链接不起作用，但您可以添加

返回列表.map（与您拥有的内容相同）。filter（item=>item！=null）

以删除空元素。@BryanElliott是的，我的问题不够清楚。数组包含正确的项，但React区分虚拟和实际DOM的方式被破坏，并导致呈现其他项。@ShawnParar是，但JSX应该忽略

null

元素。出于某种原因，它似乎并没有完全忽略它。这就是我想在这里找到的，这更像是一个为什么会发生的问题，而不是如何解决它。