React JS Добавление условных циклов в функцию отображения карты

Question

У меня есть приложение реагирования, которое выбирает продукты из файла json, с 2 кнопками сверху, каждая кнопка будет отображать другой элемент json / menu, так как некоторые из jsons, с которыми я работаю, имеют пустые категории, приложение вылетает, что я хочусделать это условный цикл, который либо пропустит категорию, либо покажет ее как пустую, если она не падает.

вы можете увидеть в приложении, когда вы нажимаете на меню 2, оно падает.

вот живой фрагмент: https://codesandbox.io/embed/j29k59x4ly?fontsize=14

, а вот сама функция отображения из строки ItemList.js 139> 149

 {activelist.children[this.state.selected].children.map(
                (item, index) => (
                  <Item
                    className="person"
                    key={index}
                    Title={item.name}
                    onClick={this.handleClick}
                    index={index}
                  />
                )
              )}

Answer 1

После того, как я отлажен.Я обнаружил, что ваши 2 API возвращают другой формат.Ответ API для this.state.items, все имеют атрибут children.Второй для this.state.items2 имеет первый элемент без атрибута children.

Для него можно отформатировать отклик данных за items2 до setState в функции Active2.И это решит проблему.

  Active2() {
  /* This is the way you clone a nested object. You can read here:
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Deep_Clone */
    let newActivelist = JSON.parse(JSON.stringify(this.state.items2)) 
    // Filter item has children only (remvoe "Empty Category")
    let newChildren = this.state.items2.children.filter(item => item.children)
    // Mutation new activelist
    newActivelist.children = newChildren
    this.setState({ activelist: newActivelist}); //CHANGED
  }

Еще один вариант клонирования вложенного объекта - использовать _. CloneDeep () из lodash library

import _ from 'lodash'
let newActivelist = _.cloneDeep(this.state.items2)

Answer 2

Я нашел ошибку в строках 123 и 124

const selectedChild = activelist.children[this.state.selected];
const selectedItem = selectedChild.children[this.state.itemSelected];

. Данные selectedChild представляют собой набор категорий, но первый элемент не имеет атрибута children, а затем создает selectcedChild.children получить undefined и вызвать проблему.

[
  {
    name: "Empty Category"
    type: "category", //<-- No `children` attribute
  }, {
    children:  [{…}, {…}, {…}]
    name: "Burgers"
    type: "category"
  }, {
    children: (2) [{…}, {…}]
    name: "Sets"
    type: "category"
  }
]

Мое решение:

1. Вы можете отформатировать весь элемент selectedChild с атрибутом children.children: [] без данных.
2. или return сообщение, когда оно не имеет дочерних элементов.Чтобы предотвратить получить элемент undefined

const selectedChild = activelist.children[this.state.selected]; 
if (!selectedChild.children) return <span>Out of stock...</span> // handle issue here
const selectedItem = selectedChild.children[this.state.itemSelected];