如何在 React 中的地图内渲染两个嵌套地图？答案

【问题标题】：How to render two nested maps inside a map in React?如何在 React 中的地图内渲染两个嵌套地图？
【发布时间】：2020-07-30 04:38:27
【问题描述】：

我想映射以下状态：

const initialState = {
    outer: [
        {
            inner1: [
                {  a: 'aaa' },
                {  b: 'bbb'}
                ......
            ],
            inner2: [
                {  c: 'ccc' },
                {  d: 'ccc'}
                ......
            ]
        },
        {
            inner1: [
                {  a: '111' },
                {  b: '222'}
                ......
            ],
            inner2: [
                {  c: '333' },
                {  d: '444'}
                ......
            ]
        },
        ......
    ]
}

在这里，我到目前为止所尝试的：

render() {
  return (
    {
      outer.map(({ inner1, inner2 }) => (
        inner1.map(({ a, b }) => (
              // do something
              <p> { a }</p>
              <p> { b }</p>
          )),
        inner2.map(({ c, d }) => (
              // do something
              <p> { c }</p>
              <p> { d }</p>
          ))
      ))
    }
  )
}

但上述解决方案只是映射一种内部状态（inner2）的数据。那么，如何使用地图渲染这样的结构呢？如果有的话，也建议任何其他更好的方法。

【问题讨论】：

标签： javascript reactjs mapping react-state arrayobject

【解决方案1】：

您正在使用逗号运算符，它忽略第一个表达式并返回后一个。

使用Array.prototype.concat方法合并两个数组。

return(
{
outer.map(({ inner1, inner2 }) => (
        inner1.map(({ a, b }) => (
              // do something
              <p> { a }</p>
              <p> { b }</p>
          )).concat(inner2.map(({ c, d }) => (
              // do something
              <p> { c }</p>
              <p> { d }</p>
          )))
      ))}
)

【讨论】：

是的，它有效，但部分有效。实际上 inner1 和 inner2 都有不同类型（或名称）的项目。例如：您的答案是总共返回 6 个元素，而 inner1 有 2 个元素，而 inner2 中有 1 个元素。我更新了我的问题，使其更易于理解。

【解决方案2】：

这取决于您需要什么，但我认为您正在寻找以下内容：


return(
{
  outer.map(({ inner1, inner2 }) => {
    
    let a = inner1.map(({ data }) => (
        // do something
    ));

    let b = inner2.map(({ data }) => (
        // do something
    ));

   return something here

  })
}
)

【讨论】：

没有帮助！我更新了我的问题，使其更易于理解。
您能否也显示您想要呈现的最终结果是什么？仍然不清楚您的要求。
我只想得到（比如打印）其中的任何内容（a、b、c、d）就是这样。