将数组映射到数组内部

问题描述

我正在尝试在应用初始化时从firestore检索的数组内部映射数组。关于我出了什么问题的任何想法吗？我正在尝试在主数组内部映射内部数组（我要映射的子数组是下面的“项目”数组/对象）。

我从Firestore获得的阵列的屏幕快照可以在这里找到：

我将在此处发布我的代码：

<Container width="1080px">
      {response.map((array) => (
        <Container justifyContent="flex-start">
          <Organization>
            <Avatar src={avatar} />
            {array.organization}
          </Organization>

          {response.id.projects.map((project) => (
            <Project>
              <Thumbnail />
              <ProjectName>
                <ProjectYear>2020 &nbsp;•&nbsp; </ProjectYear>
                My Project Name
              </ProjectName>
            </Project>
          ))}
          ;
        </Container>
      ))}
      ;
    </Container>

这是我获取数据的方式：

useEffect(() => {
firebase.db.collection('folders').onSnapshot((snapshot) => {
  const json = snapshot.docs.map((doc) => ({
    id: doc.id,...doc.data(),}));

  setResponse(json);
  console.log(json);
});

}，[]）；

解决方法

您所指的错误可能是由于您尝试在初始渲染时渲染空数组（没有嵌套数组）引起的。

尝试不设置response的初始值（即const [response,setResponse] = useState()），并在JSX前面添加检查response是否在渲染之前就到达了。

当然，您需要正确使用.map()：

return !!response.length && (<Container width="1080px">
      {response.map(({organization,projects,id}) => (
        <Container justifyContent="flex-start" key={id}>
          <Organization>
            <Avatar src={avatar} />
            {organization}
          </Organization>
          {!!projects.length && projects.map(({project_year,project_name}) => (
            <Project>
              <Thumbnail />
              <ProjectName>
                <ProjectYear>{project_year} &nbsp;•&nbsp; </ProjectYear>
                {project_name}
              </ProjectName>
            </Project>
          ))}
        </Container>
      ))}
</Container>
)

,

请您尝试以下操作：

{response && <Container width="1080px">
  {response.map((array) => (
    <Container justifyContent="flex-start">
      <Organization>
        <Avatar src={avatar} />
        {array.organization}
      </Organization>

      {array.projects.map((project) => (
        <Project>
          <Thumbnail />
          <ProjectName>
            <ProjectYear>2020 &nbsp;•&nbsp; </ProjectYear>
            My Project Name
          </ProjectName>
        </Project>
      ))}
      ;
    </Container>
  ))}
  ;
</Container> }

response &&用于避免在从Firebase获取数据之前渲染数据。 array.projects是因为我在您的照片上看到projects不在id中。

编辑

我举了一个小例子来说明地图正在运行：

let response = [{id: 1,organization: "org1",projects: [{project_year: "2020",project_name: "prj11"},{project_year: "2020",project_name: "prj12"}]},{id: 2,organization: "org2",projects: [{project_year: "2021",project_name: "prj21"},{project_year: "2021",project_name: "prj21"}]}];

response.map((array) => {
   array.projects.map((project) => {
      console.log(project.project_year,project.project_name);
   })
})

我不知道，看来问题出在其他地方。

,

您可以映射“ array”变量。

<Container width="1080px">
  {response.map((array) => (
    <Container justifyContent="flex-start">
      <Organization>
        <Avatar src={avatar} />
        {array.organization}
      </Organization>

      {array.projects.map((project) => (
        <Project>
          <Thumbnail />
          <ProjectName>
            <ProjectYear>2020 &nbsp;•&nbsp; </ProjectYear>
            My Project Name
          </ProjectName>
        </Project>
      ))}
      ;
    </Container>
  ))}
  ;
</Container>