Question

我有一个React应用程序，该应用程序从json文件中获取产品，顶部有2个按钮，每个按钮将显示另一个json / menuitems，因此，与某些json即时通讯一起使用的类别为空，该应用程序崩溃了，我想要什么只要有条件循环，只要条件不会崩溃，它就会跳过该类别或显示为空。

您可以在应用程序中单击菜单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

我在第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"
  }
]

我的解决方法是：

您可以格式化selectedChild具有children属性的所有项目。 children: []（无数据案例）。
或者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];

Answer 2

调试后。我发现您的2个API返回的格式不同。 this.state.items的API响应均具有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的另一种克隆对象的方法

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

React JS在react map函数中添加条件循环

2 个答案: