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

【问题标题】：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 width="8rem" textAlign="left">
        <MDProgress value={60} color="info" variant="gradient" label={false} />
      </MDBox>
    ),
  },
],

我想在行中创建循环

非常感谢

【问题讨论】：

你试过map 吗？

标签： javascript reactjs react-native vue.js react-hooks

【解决方案1】：

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

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

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

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

不熟悉地图的可以看看examples

【讨论】：