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

Question

在React中，我有一个嵌套很深的数组（见图），我需要在该数组上映射并检索我拥有的名称和语言！但我还需要更深入地研究文章并检索名称， pageSlug ，模板和标题，然后进入内容并从那里检索数据。在没有混乱的情况下如何做出反应？

状态：

状态var：

this.state = {
   data: []
 };

api调用：

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

数组对象

我拥有的东西和仅适用于名称道具的东西：

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

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

Answer 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(...