在数组内部映射数组答案

【问题标题】：Map an array inside of an array在数组内部映射数组
【发布时间】：2020-12-05 09:13:21
【问题描述】：

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

}, []);

【问题讨论】：

Ciao，我或多或少像其他人一样回答，但现在我看到您评论“无法读取未定义的属性映射”。你能像文本而不是图像一样添加响应数组吗？

标签： javascript arrays reactjs google-cloud-firestore mapping

【解决方案1】：

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

尽量不要设置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>
)

【讨论】：

TypeError: Cannot read property 'map' of undefined... 这是我在这个线程中提到的每个解决方案之后不断遇到的错误
@AdamSchwarcz : 这个错误是由内部地图还是外部地图触发的？如果是后者，您可能会尝试在数据实际到达之前渲染数据。您会显示更广泛的代码示例以查看您从 Firestore 获取数据的部分吗？
嘿，我在主要问题中添加了 useEffect
我认为问题出在内部地图
const [response, setResponse] = useState([]);

【解决方案2】：

你可以试试这样的：

{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);
   })
})

不知道，好像问题出在其他地方。

【讨论】：

仍然遇到同样的问题：TypeError: Cannot read property 'map' of undefined
@AdamSchwarcz 我用一个小例子更新了我的答案，以表明以这种方式编写的 map funciotn 是有效的。也许问题出在其他地方。
我明白了.. 遗憾的是它没有帮助 :( 仍然得到未定义的地图

【解决方案3】：

您可以映射“数组”变量。

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

【讨论】：