Question

如果您要在一个数组上映射以渲染元素，并且在元素的结果数组中您有一个null，然后有2个或更多具有相同键的项，则在每次重新渲染时，React都会添加< em> 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使用键来标识要更新的组件，因为索引：1 和Index：2都具有相同的密钥，因此很容易在其上进行修改，因此在这种情况下，它会查看第二个密钥（密钥的最后一次出现），并将其替换为新的重新渲染的数据

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

1 个答案: