Предупреждение: Обнаружены двое детей с одинаковым ключом `0` - PullRequest
Новая
       28

Предупреждение: Обнаружены двое детей с одинаковым ключом `0`

0 голосов
/ 04 июня 2018

Я пытаюсь отобразить массив и отобразить то, что я хочу, в элементах таблицы.Он запрашивал у меня уникальный ключ, поэтому я выбрал следующий код, потому что использовал его в другом компоненте.Мне любопытно, почему это не работает здесь. 

renderData() {
   const { aminos } = this.props.aminos;
    return aminos.map((micro, i) => {
       return (
        <Table>
          <tbody>
             <tr>
              <th scope="row">1</th>
              <th key={i}>{micro.name}</th>
             </tr>
             <tr>
                <td key={i}>{micro.serum.current}</td>
                <td key={i}>{micro.serum.prev}</td>
                <td key={i}>{micro.serum.ref}</td>
             </tr>
           </tbody>
         </Table>
       )
   }

1 Ответ

0 голосов
/ 04 июня 2018

Ключ должен быть размещен на самом внешнем компоненте. 

return aminos.map((micro, i) => {
   return (
    <Table key={i}>
      <tbody>
         <tr>
          <th scope="row">1</th>
          <th >{micro.name}</th>
         </tr>
         <tr>
            <td>{micro.serum.current}</td>
            <td>{micro.serum.prev}</td>
            <td>{micro.serum.ref}</td>
         </tr>
       </tbody>
     </Table>
   )
}

Хотя эта карта будет отображать несколько таблиц, и не обязательно, что это желаемый эффект.Также использование индекса в качестве ключей не является хорошей идеей, вы должны использовать какой-то уникальный идентификатор, например, первичный ключ из вашей базы данных.

...