Реагировать примирения на массив и братьев и сестер теряет фокус

Question

У меня была эта ошибка в моем приложении, когда ввод терял фокус при обновлении в дереве DOM. Я знаю, довольно распространенная ошибка, однако я не смог найти свой конкретный случай, так как я правильно использовал ключи, я не создавал никаких компонентов в моем методе рендеринга и т. Д. И т. Д.

Я нашел решение для моего случая: хотя некоторые входные данные были обработаны с помощью list.map(...), уязвимый был добавлен как брат, рядом с этим массивом.

Пример можно найти здесь https://codesandbox.io/s/6y7ok9km3w,, но в итоге:

Что не делать:

  <div>
    {this.state.values.map((v, i) => <input value={v} key={i} />)}
    <input
      value=""
      key={this.state.values.length}
      onChange={this.onChange}
    />
  </div>

Решение

  <div>
    {this.state.values
      .map((v, i) => <input value={v} key={i} />)
      .concat([
        <input
          value=""
          key={this.state.values.length}
          onChange={this.onChange}
        />
      ])}
  </div>

Кажется, что реакция будет игнорировать элемент key родного элемента только потому, что он не находится в массиве? Кто-нибудь знает, что там происходит?

Answer 1

Как в документе React:

Ключи имеют смысл только в контексте окружающего массива.

Так что вы говорите правильно

React будет игнорировать ключ элемента-родителя только потому, что он не находится в массиве

Ключ входного элемента, которого нет в массиве, будет игнорироваться. И для записи, вы не должны использовать индекс как ключ столько, сколько можете. Если вы хотите узнать больше о рисках, посетите https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318, чтобы узнать больше