如何在React中修复“ TypeError：category.map不是函数”错误

Question

我不断收到categories.map不是函数的错误，但我不明白为什么。我正在为从API调用接收的数据设置类别，但一直收到此错误。另外，有没有一种方法可以轻松地调用父对象的子对象？API数据嵌套大约4-5层深度，并且它们都有不同的名称，那么我将如何遍历所有这些数据呢？

response.data控制台中的示例（打开了一些嵌套对象）

这是我的组件：

class Menu extends React.Component {

  state = {

    categories: []

  };

  componentDidMount() {

    axios

      .get("https://www.ifixit.com/api/2.0/categories")

      .then(response => this.setState({ categories: response.data }));

  } 

  render() {

    let categories = this.state.categories;

    return (

      <div>

        <ul>

          {categories.map((m, index) => {

            return (

              <li key={index}>

                {m.children && <Menu categories={m.children} />}

              </li>

            );

          })}

        </ul>

      </div>

    );

  }

}

export default Menu;

编辑：当我使用Object.keys它给我的错误“未捕获的不变违规：对象不是有效的React子（找到：具有键的对象...）”，然后列出了我正在调用的对象内的所有键。有谁知道我可以如何调用该函数（可能是递归的？）以将其应用于对象内的所有对象？

这是我的更新代码：

class Menu extends React.Component {

  state = {

    collapsed: false,

    categories: []

  };

  componentDidMount() {

    axios

      .get("https://www.ifixit.com/api/2.0/categories")

      .then(response => this.setState({ categories: response.data}));

  } 

  render() {

    const { categories } = this.state;

    return (

      <div>

        {Object.keys(categories).map((item, i) => (

          <li key={i}>

            <span>{categories[item]}</span>

          </li>

        ))}

      </div>

    );

  }

}

export default Menu;

Answer 1

问题是response.data不是，array但它是一个json对象。您可以使用以下代码基于键进行映射：Object.keys(categories).map((key, index) => {&nbsp; console.log(categories[key]);});