0

如果你在一个数组上映射来渲染元素，并且在生成的元素数组中你有一个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 添加一个附加元素。

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

  • 确保唯一标识

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

  • 确保没有null元素

我知道 React 不支持具有相同键的元素，并警告说使用它们会导致错误，但我仍然想知道究竟是什么原因造成的？有深入了解 JSX 和 React 协调的人可以向我解释一下吗？

4

1 回答 1

1

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

于 2019-05-16T11:21:40.567 回答