javascript - React 在每次重新渲染时为元素列表中的每个 `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>
    );
  });
}

这是 CodeSandbox 上用于使用它的相同代码:https://codesandbox.io/s/8kqxr

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

可以通过以下任一方法避免此问题:

• 确保唯一 ID

• 将所有 null 元素移动到列表末尾

• 确保没有 null 元素

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

Answer 1

我相信 React 使用键来识别要更新的组件，因为 Index: 1和 Index: 2 都有相同的键，它会混淆要修改的键，因此在这种情况下，它会查看第二个(键的最后一次出现) Index:2 并将其替换为新的重新渲染数据