Как мне сопоставить глубоко вложенный объект массива?

Question

В React у меня есть глубоко вложенный массив (см. Фото). Мне нужно сопоставить этот массив и получить имя и язык , который у меня есть! но мне также нужно углубиться в статей и извлечь name , pageSlug , шаблонов и title а затем в содержание и извлекать данные оттуда. Как мне это реагировать, не запутавшись?

Состояние:

состояние var:

this.state = {
   data: []
 };

вызов API:

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

Объект Array

Что у меня есть и что работает только для имени:

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

article prop ожидает объект, поэтому мне нужно передать все данные из "полей" внутри "article".

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