React JS 在反应映射函数中添加条件循环答案

【问题标题】：React JS Adding a conditional loops in react map functionReact JS 在反应映射函数中添加条件循环
【发布时间】：2019-07-26 11:46:36
【问题描述】：

我有一个从 json 文件中获取产品的 react 应用程序，每个按钮顶部有 2 个按钮将显示另一个 json/menuitems，因此由于我使用的一些 jsons 有空类别，应用程序崩溃，我想要什么to do 是一个条件循环，它要么跳过类别，要么将其显示为空，只要它不崩溃。

当您单击菜单 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}
                  />
                )
              )}

【问题讨论】：

嗨，这有点混乱，你能解释一下'this.state.selected'是做什么的吗？我注意到您有 MENUS、CATEGORIES 和 ITENS，当您选择其中之一时，您会将值保存在 this.state.selected 中？
将类别映射到另一个组件“类别”中，以便在滚动菜单栏中显示，并具有在单击类别时返回数字索引的功能，该功能将根据类别映射类别项索引，选定状态以 0 作为第一个类别开始，并在单击时不断变化以显示其中的项目。

标签： javascript arrays reactjs api jsx

【解决方案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];

【讨论】：

感谢您的输入，但我不确定如何应用解决方案 1，至于解决方案 2，我在返回之前和之后尝试过，它显示相同的错误，我希望你不介意如果你可以向我展示你的答案。
行 165 和 length 以检查条件 selectedItem.children.length。这是我目前修复的codesandbox.io/embed/j29k59x4ly?fontsize=14
您发送的链接与我发布的链接相同，您可以 fork 或保存您所做的更改吗？

【解决方案2】：

在我调试之后。我发现您的 2 个 API 返回不同的格式。 API 对this.state.items 的响应，都有children 属性。 this.state.items2 的第二个项目的第一个项目没有 children 属性。

在Active2函数中，您可以在setState之前为它格式化items2的数据响应。这将解决问题。

  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() of lodash 库

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

【讨论】：