将数组映射到数组内部

debugcn 发表于 Dev

亚当·施瓦茨（Adam Schwarcz）

我正在尝试在应用初始化时从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);
});

}，[]）;

叶夫根·戈本科夫（Yevgen Gorbunkov）

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

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

并且，当然，您需要.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>
)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。