Блог

У меня есть вложенный массив объектов, который выглядит примерно так:

 [
  {
    _Category: "Animals",
    _Child: {
       _Obj: [{_Title: "Monkey", _Link: "www.monkeys.com"}], [{_Title: "Monkey", _Link: "www.monkeys.com"}], etc
    }
  },
  {
    _Category: "Fruit",
    _Child: {
       _Obj: [{_Title: "Apple", _Link: "www.apples.com"}], [{_Title: "Pineapple", _Link: "www.pineapples.com"}], etc
    }
  }
]
  

Я пытаюсь добавить _Title и _Link каждой группы в элемент JSX. Я смог отобразить _Categories без проблем, но вложенные значения доставляют мне трудности.

Когда я перехожу к элементам в DevTools, я вижу, что для каждого элемента существует 11 разных групп — это то, сколько массивов объектов находится в этой конкретной категории — но _Titles и _Links пусты.

В приведенном ниже коде я сопоставил _Category данные и таким образом отобразил категории. Должен ли я сделать что-то подобное для _Child объекта — может быть, другую карту или что-то еще?

Код:

 Element = ({ cats }) => {
    return (
        <div>
            {cats
                .filter((cat) => cat._Root === "Quick Links")
                .map((cat) => (
                    
                 <>
                  <div className={"colFor-"   cat._Category}>
                    <h5>{cat._Category}</h5>

                    {cat._Child._Obj.map((item) => (
                        <>
                            <a href={item._Link}>
                                <p>{item._Title}</p>
                            </a>
                            <br />
                        </>
                    ))}
                        
                   </div>
                  </>
                ))
            }
            
        </div>
    )
  }
  

Вот что cats выглядит так:

Обновление: как указал @Dominik, способ настройки моего объекта был неправильным, поэтому я изменил его.

Согласно вашим образцам данных, cat._Child._Obj — это массив, и каждый элемент в нем также является массивом, поэтому я думаю, что вам нужно сначала выровнять массив, а затем использовать функцию map .

 const myarr = [[{_Title: "Monkey1", _Link: "www.monkeys1.com"}], [{_Title: "Monkey2", _Link: "www.monkeys1.com"}]];
const myarrFlat = myarr.flat();
myarrFlat.map(cat => console.log(cat._Title, cat._Link));