Как указать ключи в таблице начальной загрузки React

#reactjs #react-bootstrap #react-bootstrap-table

Вопрос:

Используя таблицу начальной загрузки React, я получаю предупреждение Warning: Each child in a list should have a unique "key" prop. , которое я читал о том, как это необходимо для списков, но не уверен, где я должен установить ключ для таблицы? Мой стол выглядит примерно так

 lt;Table size="sm" responsive="sm" bordered hover stripedgt;  lt;theadgt;  lt;trgt;  lt;thgt;Col1lt;/thgt;  lt;thgt;Col2lt;/thgt;  lt;thgt;Col3lt;/thgt;  lt;thgt;Col4lt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  { histories.map((h) =gt; (  lt;trgt;  lt;thgt;{ h.col1} lt;/thgt;  lt;thgt; { h.col2}lt;/thgt;  lt;thgt; { h.col3}lt;/thgt;  lt;thgt;{ h.col4}lt;/thgt;  lt;/trgt;  )) }  lt;/tbodygt;  lt;/Tablegt;

1. ключ может быть любым, даже жестко закодированным, если важно избавиться от предупреждения ( lt;th key="1"gt;Col1lt;/thgt; ). Если у вас есть данные, которые вы просматриваете, это может быть идентификатор, имя или что-то еще. Или, если вы действительно хотите выложиться по полной, вы можете сгенерировать uuid для каждого элемента.

2. если histories у вас есть удостоверение личности, вы могли бы это сделать lt;tr key={h.id}gt; , скорее всего, именно оттуда исходит предупреждение

Ответ №1:

Это сработало бы, если бы для этого был идентификатор histories .

 { histories.map((h) =gt; (  lt;tr key={h.id}gt;  lt;thgt;{ h.col1} lt;/thgt;  lt;thgt; { h.col2}lt;/thgt;  lt;thgt; { h.col3}lt;/thgt;  lt;thgt;{ h.col4}lt;/thgt;  lt;/trgt; )) }

Ключом действительно может быть что угодно (даже h.col1 если вам нравится), если он уникален в этом списке. Это не очень важно (следовательно, предупреждение вместо ошибки), но это определенно хорошая практика, когда вы перебираете некоторые данные и составляете из них список, чтобы предотвратить непредсказуемое поведение и помочь реагировать правильно.