在每个重新渲染的元素列表中为每个null添加一个新项目

Question

如果您在数组上映射到渲染元素，并且在由此产生的元素数组中，您具有 null，然后在每个重新渲染上带有相同键的2个或更多项目，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>
    );
  });
}

，这是播放它的代码和盒子上相同的代码：https：//codesandbox.io/s/8kqxr

请注意，当您将悬停在列表上(因此导致重新渲染(时，React会在生成的DOM中添加一个附加元素。

可以避免任何一个问题：

• 确保唯一的ID

• 将所有null元素移至列表的末尾

• 确保没有null元素

我知道React不支持具有相同键的元素，并且警告说使用这些元素会导致错误，但我仍然想知道是什么原因导致了这一点？对JSX有深入了解并进行对帐的人可以向我解释吗？

Answer 1

我相信React使用键来识别要更新的组件，因为索引：1索引：2两者都具有相同的键，它会混淆要修改的键，因此在这种情况下，它查看第二个(键的最后出现(索引：2并用新的重新渲染数据替换为2