Прокручивать объекты внутри объектов, чтобы создать вложенное меню?

Question

Я очень новичок в Javascript и React, поэтому извините, если это глупый вопрос ... Я вызываю данные из API, который дает мне json, составленный из группы объектов внутри объектов внутри объектов.Я пытаюсь создать вложенное меню для всех этих объектов, но у меня возникают проблемы даже при рендеринге каждого уровня.

Я пытался использовать Object.keys, чтобы превратить первый слой элементов объектов вмассив, но он не позволит мне вернуть эти результаты (работает только console.log), потому что я получаю ошибку «Объекты недопустимы как дочерний элемент React» для объектов внутри.Как я могу получить доступ к этим объектам глубиной 4-5 уровней без лишнего кода?

Пожалуйста, дайте мне знать, если вы хотите увидеть больше кода / объектов json или каких-либо скриншотов

componentDidMount() {
    axios
      .get("https://www.ifixit.com/api/2.0/categories")
      .then(response => this.setState({ categories: response.data }));
  } 

listOfCategories возвращает массив первого слоя объектов

  render() {
    const { categories } = this.state;
    const listOfCategories = Object.keys(categories);
    console.log(listOfCategories);

это часть, где я могу сделать console.log (category [key]) и увидеть второй слой до последнего слоя вложенныхобъекты, но на самом деле я не могу вернуть его из-за ошибки «Объекты недопустимы как дочерний элемент React».

    const list = listOfCategories.map(key => {
      console.log(categories[key]);
      //return categories[key];
      return null;
    });

эта часть фактически отображает первый слой категорий на экране

    return (
      <div>
        {listOfCategories}
      </div>
    );
  }
}

Снимок экрана console.log(categories[key]), на котором показаны данные, начиная со второго слоя объектов.Первый слой (listOfCategories): Apparel {}, Appliance{}, Camera{}, Car and Truck{} и т. Д.

Answer 1

Вы должны вернуть Элемент React .

Также, обратитесь к тому, как Рендеринг нескольких компонентов .

Ваш код должен выглядеть примерно так:

class Categories extends Component  {

state = { categories: [] };

componentDidMount() {
    axios
      .get("https://www.ifixit.com/api/2.0/categories")
      .then(response => this.setState({ categories: response.data }));
  } 

  render() {
    const { categories } = this.state;
    const categoriesKeys = categories.keys().map(key => {
      // Create your submenu
      console.log(categories[key]);

      // Return react element
      // Your key should be unique (avoid using array index)
      return <SubMenu key={unique(key)}>{JSON.stringify(categories[key])}</SubMenu>;
    });


    return <Menu>{categoriesKeys}</Menu>;
  }