如何循环列出组件内的所有用户

Posted 2023-02-22

【中文标题】如何循环列出组件内的所有用户

【英文标题】：How to loop to list all my users inside the component

【发布时间】：2022-01-23 21:04:07

【问题描述】：

很好，我是 react 新手，但问题是我不知道如何在这个组件中创建一个循环来列出我已经尝试了一千零一种方法但我没有得到任何结果的所有用户。

 columns: [
   Header: "companies", accessor: "companies", width: "45%", align: "left" ,
   Header: "members", accessor: "members", width: "10%", align: "left" ,
   Header: "budget", accessor: "budget", align: "center" ,
   Header: "completion", accessor: "completion", align: "center" ,
],

rows: [
  
    companies: <Company image=logoXD name="Material UI XD Version" />,
    members: (
      <MDBox display="flex" py=1>
        avatars([
          [team1, "Ryan Tompson"],
          [team2, "Romina Hadid"],
          [team3, "Alexander Smith"],
          [team4, "Jessica Doe"],
        ])
      </MDBox>
    ),
    budget: (
      <MDTypography variant="caption" color="text" fontWeight="medium">
        $14,000
      </MDTypography>
    ),
    completion: (
      <MDBox  textAlign="left">
        <MDProgress value=60 color="info" variant="gradient" label=false />
      </MDBox>
    ),
  ,
],

我想在行中创建循环

非常感谢

【问题讨论】：

你试过map 吗？

【参考方案1】：

您可以使用map 函数对数组进行循环。例如，如果您想显示该行，您可以在返回函数中这样做：

return (
  <>
    
      rows.map(row => row) // Display every row
    
  </>
)

或者如果你想访问每一行的特定属性：

rows.map(row => row.companies) // Display every companies

不熟悉地图的可以看看examples