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

Question

我想映射以下状态：

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）的数据。那么，如何使用地图渲染这样的结构呢？如果有的话，也建议任何其他更好的方法。

Answer 1

您正在使用忽略第一个表达式和 returns 后一个表达式的逗号运算符。

使用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>
          )))
      ))}
)

Answer 2

这取决于您的需求，但我认为这就是您要寻找的：


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

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

   return something here

  })
}
)

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

How to render two nested maps inside a map in React?

javascript

mapping

arrayobject

reactjs

react-state