如何在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) => {

  console.log(categories[key]);

});