在 React 中使用 Map 遍历数组抛出错误

Question

我有一个功能组件正在从 API 读取数据。我已经定义了一个界面，但无法在 table 中使用 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 模板

...
return (
  
<div>
  <h2>EziTracker Dashboard Report</h2>
    {eziStatusCollection && eziStatusCollection.length >0 && (
    <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;

Answer 1

您的 table body 应该在地图之外，因为它每次都在循环：

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

这样映射键将与每个 child (tr) 相关联并且错误不应发生。

在 React 中使用 Map 遍历数组抛出错误

Loop through array using Map in React throw error

reactjs

react-data-grid

错误

界面

React 功能组件return 模板