React中遍历嵌套数组 提取point?.value生成数字数组的问题

需求说明 #

需要从给定的嵌套数据结构中，提取所有point?.value生成纯数字数组，此前尝试let data = point?.value + 1的写法未达到预期。

现有数据结构 #

export const testData = [
  {
    "date": [
      "2016-09-0912:00:00",
      "2015-09-0913:10:00"
    ],
    "title": [
      {
        "name": 'Name 1',
        "description": [
          {
            "value": 7898
          },
          {
            "value": 7898
          }
        ]
      },
      {
        "name": 'Name 2',
        "description": [
          {
            "value": 3244
          },
          {
            "value": 4343
          }
        ]
      },
      {
        "name": 'Name 3',
        "description": [
          null,
          null
        ]
      }
    ]
  }
]

原有代码问题 #

你之前的多层map写法返回的是多层嵌套数组[[[7898,7898],[3244,4343],[undefined,undefined]]]，不是扁平的数字数组，而且没有过滤description中null对应的无效undefined值。

修改方案 #

1. 单独生成纯数字数组 #

直接用flatMap拍平嵌套结构，再过滤有效数字即可：

const valueArray = testData
  // 拍平外层testData到title层级
  .flatMap(inner => inner.title)
  // 拍平title层级到description层级
  .flatMap(titleItem => titleItem.description)
  // 提取value，null对应返回undefined
  .map(point => point?.value)
  // 过滤出有效数字，排除undefined、null等无效项
  .filter(value => typeof value === 'number')

最终得到的valueArray为[7898, 7898, 3244, 4343]，符合纯数字数组的需求。

如果需要给每个值加1，修改map逻辑即可：

.map(point => (point?.value ?? 0) + 1)

用空值合并运算符??处理null的情况，避免生成NaN。

2. 结合渲染逻辑的写法 #

如果需要在React组件渲染时同时使用该数组，修改后的代码如下：

<div style={{ color: 'white' }}>
Hello
{testData.map((inner, idx) => {
  // 处理单个inner节点下的value数组
  const innerValueArr = inner.title
    .flatMap(titleItem => titleItem.description)
    .map(point => point?.value)
    .filter(Number.isFinite)
  return (
    <p key={idx} style={{color: 'white'}}>
      {/* 可直接渲染数组内容，也可以使用innerValueArr做其他逻辑处理 */}
      {innerValueArr.join(', ')}
    </p>
  )
})}
</div>

内容的提问来源于stack exchange，提问作者Sole