如何修复React中的"TypeError: categories.map is not a function“错误

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

您可以将属性对象映射到数组并处理它。

let result = Object.entries(data).map(( [k, v] ) => ({ [k]: v }));

更改为

componentDidMount() {
    axios
      .get("https://www.ifixit.com/api/2.0/categories")
      .then(response => this.setState({ 
       categories: Object.entries(response.data).map(( [k, v] ) => ({ [k]: v }) }));
  } 

Answer 2

问题是response.data不是array，而是一个json对象。

您可以使用以下代码基于键进行映射：

Object.keys(categories).map((key, index) => {
  console.log(categories[key]);
});