Блог

У меня есть функциональный компонент, который считывает данные из API. Я определил интерфейс, но не смог выполнить цикл и отобразить в таблице, используя Map в react.

ошибка

 index.js:1 Warning: Each child in a list should have a unique "key" prop.
 

Интерфейс

 export interface ISiteManager{
   managerId: number,
   name: string,
   isDeleted: false
}
 

Функциональный компонент React возвращает шаблон

 ...
return (
  
<div>
  <h2>EziTracker Dashboard Report</h2>
    {eziStatusCollection amp;amp; eziStatusCollection.length >0 amp;amp; (
    <table  className="table">
      <thead>
        <tr>
          <th>ManagerId</th>
          <th>Name</th>
          <th>Is Deleted</th>
        </tr>
      </thead>
      {
        eziStatusCollection.map((item, index) => {
          return(
          <tbody>
            <tr key={index}>
              <td>{item.managerId}</td>
              <td>{item.name}</td>
              <td>{item.isDeleted}</td>
            </tr>
          </tbody>
        )})
      }
    </table>)}
  </div>
 );
};

export default MyComponent;
 

Тело вашей таблицы должно быть вне карты, так как оно также зацикливается каждый раз:

 <tbody>
     {
        eziStatusCollection.map((item, index) => {
          return(
          
            <tr key={index}>
              <td>{item.managerId}</td>
              <td>{item.name}</td>
              <td>{item.isDeleted}</td>
            </tr>
        )})
      }
  </tbody>
 

Таким образом, ключ map будет связан с каждым дочерним элементом (tr), и ошибка не должна возникать.