Question

我已经制作了一个菜单项应用程序，该应用程序显示json文件中的产品，每当单击某个项目时，它就会显示该项目的一些修饰符，我正在使用嵌套的json，并且该应用程序运行良好，当某些内容出现错误时崩溃单击类别或项目，您可以通过单击“比萨饼”和“要约”中的项目进行测试，并且某些类别由于相同的问题而崩溃，例如“甜点”和“侧面”。

我不确定该如何解决这个问题，我还是个新手，不胜感激，对此有任何帮助，以下是沙盒链接，大多数功能都在Itemlist.js中，修饰符props在在itemlist.js中调用的modifier.js

汉堡和套餐类别下的项目工作正常，其余类别仅第一个项目有效，其余项目崩溃。尝试单击最后一个类别下的项目，例如要约2和要约3，它将停止工作。我认为，因为json结构有点异构，所以在映射函数中，它要求没有子项的项的子项，从而导致崩溃，并且具有子项的项会在每次单击时显示。不知道如何克服这个问题。

实时摘要：https://codesandbox.io/embed/1ozwnonr93?fontsize=14

Answer 1

您需要从修改器组件中删除一些道具，请在下面找到：-

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

因为您可以单击甜点，所以它的索引值为4，但是甜点当您可以使用“ item.children [index]”行时，儿童的长度为2，会出现错误，因为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>

Answer 2

代码问题：

在ItemList.js第123行中，您正在

上进行映射

0，有4个孩子。

您正在使用参数的索引[对于孩子来说将是3到childId={item.children[index].id}，并像这样计算id，

2。

现在考虑一下，当索引为item.children并且您的item.children[index]只有两个元素时，值将是

item.children[2]是undefined？它将是id，因此错误无法读取undefined的属性# A tibble: 15 x 4 # Groups: bat [3] bat log rocc id <fct> <int> <fct> <int> 1 A 1 occ 1 2 A 2 nocc 1 3 A 3 rent 1 4 A 4 rent 1 5 A 5 rent 1 6 C 7 occ 3 7 C 8 rent 4 8 C 9 rent 5 9 C 10 nocc 5 10 D 11 rent 6 11 D 12 rent 7 12 D 13 rent 8 13 D 14 nocc 9 14 D 15 rent 10 15 D 16 nocc 11。

在映射功能上对来自JSON崩溃的产品进行反应

2 个答案: