React如何从接口嵌套数组提取persons数据存入state并渲染人名

问题原因 #

res.data.peoples是数组类型，persons是数组每个元素下的子属性，不能直接通过数组本身访问persons，需要遍历peoples数组收集所有子级persons数据。

代码修改方案 #

修改axios请求的回调逻辑，合并所有persons数组为一维数组后存入state：

axios
  .get(
    "url",
    config
  )
  .then((res) => {
    // 合并所有peoples子项的persons数组
    const allPersons = res.data.peoples.flatMap(item => item.persons)
    this.setState({ items: allPersons })
  })

如果运行环境不支持flatMap，可以替换为兼容写法：

const allPersons = [].concat(...res.data.peoples.map(item => item.persons))

JSX遍历渲染示例 #

后续在组件渲染时直接遍历items即可输出所有人名：

render() {
  return (
    <div>
      {this.state.items?.map(person => (
        <p key={person.id}>{person.name}</p>
      ))}
    </div>
  )
}

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