Каждый дочерний элемент в массиве или итераторе должен иметь уникальную «ключевую» опору.Не уверен почему - PullRequest
Новая
       7

Каждый дочерний элемент в массиве или итераторе должен иметь уникальную «ключевую» опору.Не уверен почему

0 голосов
/ 12 октября 2018 
const list = props.things.toDo.map(
  function(thing) {
    return(
      <li>{thing.name}</li>
    );
  }
);

Не могу понять, что это предупреждение о реакции ?!

Ответы [ 3 ]

0 голосов
/ 12 октября 2018

Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены.Ключи должны быть даны элементам в массиве, чтобы дать элементам устойчивую идентичность: 

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);

Лучший способ выбрать ключ - это использовать строку, которая однозначно идентифицирует элемент списка среди егобратья и сестры.Чаще всего вы использовали бы идентификаторы из ваших данных в качестве ключей: 

const list = props.things.toDo.map(
  function(thing) {
    return(
      <li key={thing.id}>{thing.name}</li>
    );
  }
);

Если у вас нет стабильных идентификаторов для визуализированных элементов, вы можете использовать индекс элемента в качестве ключа в качестве последнего средства:

const list = props.things.toDo.map(
  function(thing, index) {
    return(
      <li key={index}>{thing.name}</li>
    );
  }
);

Мы не рекомендуем использовать индексы для ключей, если порядок элементов может измениться.Это может негативно повлиять на производительность и может вызвать проблемы с состоянием компонента.Если вы решите не назначать явный ключ элементам списка, React по умолчанию будет использовать индексы в качестве ключей.

Ссылка : https://reactjs.org/docs/lists-and-keys.html#keys

0 голосов
/ 12 октября 2018 
const list = props.things.toDo.map((x, i) => <li key={i}>{thing.name}</li>);

Ваш код может быть сжат до приведенного выше кода.Как уже упоминалось, всякий раз, когда мы визуализируем список, React требует, чтобы каждый отдельный элемент был уникальным, что в этом случае требует key проп, но вместо использования key={thing.name}, который, я считаю, есть вероятность, что thing.name не является уникальным, я обычно использовал бы индекс, который на 100% гарантированно уникален

0 голосов
/ 12 октября 2018

В качестве быстрого решения попробуйте следующее: 

<li key={thing.name}>{thing.name}</li>

Затем прочтите документы React для Списки и ключи .

Клавиши помогают Reactопределить, какие элементы были изменены, добавлены или удалены.Необходимо дать ключи элементам в массиве, чтобы дать элементам устойчивую идентичность.

Возможно, вы захотите заменить ключ действительно уникальным значением, если thing.name не гарантируетбыть одинаковым для всех предметов.

...