Reactjs 在React DROW错误中使用Map循环遍历数组

我有一个从API读取数据的功能组件。我已经定义了一个接口，但无法使用react中的Map在表中循环和显示

错误 接口 React功能组件返回模板

。。。
返回(
EziTracker仪表板报告
{eziStatusCollection&&eziStatusCollection.length>0&&(
马格里德
名称
删除
{
eziStatusCollection.map（（项目，索引）=>{
返回(
{item.managerId}
{item.name}
{item.isDeleted}
)})
}
)}
);
};
导出默认MyComponent；

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

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

{
eziStatusCollection.map（（项目，索引）=>{
返回(
{item.managerId}
{item.name}
{item.isDeleted}
)})
}

---

这样，映射键将与每个子项（tr）关联，并且不会出现错误。

非常感谢它的工作

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

...
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;

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