Реакция продуктов из JSON-сбоя на функцию отображения - PullRequest
Новая
       38

Реакция продуктов из JSON-сбоя на функцию отображения

0 голосов
/ 01 марта 2019

Я создал приложение пунктов меню, которое показывает продукты из файла json, каждый раз, когда по элементу нажимают, он показывает некоторые модификаторы этого элемента, я работаю с вложенным json, и приложение работает хорошо, а затем вылетает, когда некоторыекликнув по категориям или элементам, вы можете проверить их, нажав на элементы из «пицц» и «предложений», и некоторые категории вылетят из-за одной и той же проблемы, например «десертов» и «сторон».

Я не уверен, как я могу решить такую ​​проблему, я все еще новичок, чтобы среагировать, буду признателен за любую помощь по этому вопросу, ниже ссылка песочница, большинство функций находятся в Itemlist.js, и модификаторреквизиты находятся внутри modifier.js, который вызывается из itemlist.js

Элементы под категорией бургеров и наборов работают нормально, из остальных категорий работает только первый элемент, а остальные вылетает.Попробуйте щелкнуть по элементам в последних категориях, таких как предложение 2 и предложение 3, оно перестанет работать.Я думаю, потому что структура json немного неоднородна, поэтому в функции отображения она запрашивает дочерние элементы элементов, у которых нет дочерних элементов, поэтому происходит сбой, и элементы, у которых есть дочерние элементы, отображаются при каждом нажатии.не уверен, как я могу преодолеть это.

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

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Проблема с кодом:

В строке 123 ItemList.js вы сопоставляете

{items.children[this.state.selected].children[this.state.itemSelected].children, у которого есть 4 дочерних элемента.

Вы используете индекс [который будет 0 до 3 для детей] аргумента и вычисляете id следующим образом:

childId={item.children[index].id}.

СейчасУчтите это, когда индекс равен 2, а ваш item.children имеет только два элемента, каково будет значение

item.children[index], равное item.children[2]?Это будет undefined, следовательно, ошибка не может прочитать свойство id из undefined.

0 голосов
/ 01 марта 2019

Вам необходимо удалить некоторые реквизиты из компонента-модификатора, см. Ниже: -

  • childId = {item.children [index] .id}
  • childp= {item.children [index] .name}
  • childprice = {item.children [index] .base_price}
  • img = {item.children [index] .image_url}

, поскольку вы можете щелкнуть по десерту элемента, он имеет значение индекса 4, но длина дочернего десерта равна 2, когда вы можете использовать эту строку "item.children [index]", он выдаст ошибку, потому что index = 4 иу детей нет индекса 4.

  • childprice = {item.children [index] .base_price}
  • img = {item.children [index] .image_url}

над этими двумя строками используется меньше, потому что компонент модификаторов не использует реквизиты childprice и img.

Пожалуйста, найдите код обновления: - 

**ItemList.js:-**

    <div>
      {items.children[this.state.selected].children[
         this.state.itemSelected
         ].children.map((item, index) => (
           <Modifiers
              key={index}
              title={item.name}
              myKey={index}
              options={item.children}
           />
      ))}
   </div>
...