Реагируйте, добавляя новый элемент для каждого `null` в списке элементов при каждом повторном рендеринге

Если вы сопоставляете массив для элементов рендеринга и в результирующем массиве элементов у вас есть 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 объяснить мне это?