如何映射深度嵌套的数组对象？答案

【问题标题】：How do I map a deeply nested array object?如何映射深度嵌套的数组对象？
【发布时间】：2019-06-27 16:17:31
【问题描述】：

在 React 中，我有一个深度嵌套的数组（见图）我需要映射这个数组并检索我拥有的 name 和 language！但我还需要更深入地了解 articles 并检索 name、pageSlug、templates 和 title 然后进入 content 并从那里检索数据。我该如何做出反应而不会变得混乱？

状态：

状态变量：

this.state = {
   data: []
 };

api 调用：

getKnowledgePageCategories(this.props.locale).then(
      (response) => {
        this.setState({data: response})
    });

数组对象

我所拥有的以及仅适用于 name 道具的：

{data && (
    Object.keys(data).map((key, index) => {
     return (
           <ButtonGroup
             key={`${data[index].fields.name}--key`}
             name={data[index].fields.name}
             articles={}
            />
           )
         })
      )}

articles 道具需要一个对象，因此我需要从“文章”中的“字段”传递所有数据。

【问题讨论】：

“我该如何做出反应而不让它变得混乱？”你可能不知道。根据定义，处理深度嵌套的数据结构会变得很混乱。

标签： arrays reactjs dictionary object

【解决方案1】：

您只需映射articles，因为这是一个数组：

<ButtonGroup
  key={`${data[index].fields.name}--key`}
  name={data[index].fields.name}
  articles={data[index].fields.articles.map(article => article.fields)}
/>

另外，看起来data 是一个数组而不是一个对象。所以不需要使用Object.keys。你应该可以简单地做data.map(...

【讨论】：