#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
если вам нравится), если он уникален в этом списке. Это не очень важно (следовательно, предупреждение вместо ошибки), но это определенно хорошая практика, когда вы перебираете некоторые данные и составляете из них список, чтобы предотвратить непредсказуемое поведение и помочь реагировать правильно.
Комментарии:
1. Спасибо. Часть, о которой я не знал, заключается в том, что она должна была быть частью lt;trgt;