Question

我对Javascript和React还是很陌生，所以如果这是一个愚蠢的问题，请原谅...我正在从API调用数据，该API给了我一个由对象内部对象内部的一堆对象组成的json。我正在尝试为所有这些对象创建一个嵌套菜单，但是即使渲染每个级别，我也遇到麻烦。

我尝试使用Object.keys将对象的第一层项目转换为数组，但是它不允许我返回这些结果（仅console.log有效），因为我得到了“对于其中的对象，对象无效，因为它是“ React子代”错误。如何在没有超级混乱代码的情况下访问这些4-5层深的对象？

如果您想查看更多代码/布置的json对象或任何屏幕截图，请告诉我

componentDidMount() {
    axios
      .get("https://www.ifixit.com/api/2.0/categories")
      .then(response => this.setState({ categories: response.data }));
  }

listOfCategories返回对象第一层的数组

  render() {
    const { categories } = this.state;
    const listOfCategories = Object.keys(categories);
    console.log(listOfCategories);

这是我可以执行console.log（categories [key]）并看到第二层到最后一层嵌套对象的部分，但是由于“对象无效，因此我无法真正返回它一个React孩子”错误。

    const list = listOfCategories.map(key => {
      console.log(categories[key]);
      //return categories[key];
      return null;
    });

这部分实际上将类别的第一层呈现到屏幕上

    return (
      <div>
        {listOfCategories}
      </div>
    );
  }
}

console.log(categories[key])的屏幕截图，它显示了从第二层对象开始的数据。第一层（listOfCategories）是：Apparel {}, Appliance{}, Camera{}, Car and Truck{}，等等。

Answer 1

您应该返回React element。

另外，请参阅方式Render Multiple Components。

您的代码应如下所示：

class Categories extends Component  {

state = { categories: [] };

componentDidMount() {
    axios
      .get("https://www.ifixit.com/api/2.0/categories")
      .then(response => this.setState({ categories: response.data }));
  } 

  render() {
    const { categories } = this.state;
    const categoriesKeys = categories.keys().map(key => {
      // Create your submenu
      console.log(categories[key]);

      // Return react element
      // Your key should be unique (avoid using array index)
      return <SubMenu key={unique(key)}>{JSON.stringify(categories[key])}</SubMenu>;
    });


    return <Menu>{categoriesKeys}</Menu>;
  }

Answer 2

当我尝试从MongoDB中查看嵌套对象时，我遇到了类似的问题。假设您（或任何查看此信息的人）正在使用异步功能获取数据，则返回的是嵌套对象。由于其性质，您不确定服务器的最终结果是什么。除了使用JSON.stringify，您还可以选择仅在外部MAP中以以下格式输出子项

                  categories.map((key) =>   
                          <span className="" key={key._id}>
                        <b>{key.Apparel ? key.Apparel.SOMEPROPERTY : 'Nothing' }</b>
                          </span>   
                    )

请注意，检查很重要，因为否则会引发错误。该方法不适用于深度嵌套的对象。

遍历对象内的对象以创建嵌套菜单？

2 个答案: