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

Posted 2023-02-22

【中文标题】如何修复 React 中的“TypeError：categories.map 不是函数”错误

【英文标题】：How to fix "TypeError: categories.map is not a function" error in React

【发布时间】：2019-09-21 12:14:54

【问题描述】：

我不断收到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;

【问题讨论】：

您可以通过控制台记录响应吗？我相信类别是作为对象而不是数组返回的，因此，您会收到该错误

看起来您的响应数据是一个带有键值对的对象key: value。 map 方法仅适用于数组类型。您可能想改用for(let m in categories)。

【参考方案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 ) ));
   

【讨论】：

我明白了，我认为我从来没有使用过 map 函数而不是数组，所以我没有意识到这是一个问题。非常感谢！

当我这样做时，它给了我错误“未捕获的不变违规：对象作为 React 子项无效（找到：带键的对象...”，然后列出我正在调用的对象。您知道如何递归调用我的组件以应用于对象中的所有对象吗？

【参考方案2】：

问题在于response.data 不是array，而是json 对象。

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

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