gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 17:36:31 25 4
gpt4 key购买 nike

我不断收到此错误,提示 categories.map 不是函数,但我不明白为什么。我正在为从 API 调用收到的数据设置类别,但一直收到此错误。另外,有没有办法轻松调用父对象的子对象? API 数据嵌套了大约 4-5 层,而且它们都有不同的名称,那么我将如何遍历所有这些数据?

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

enter image description here

这是我的组件:

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;

最佳答案

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

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 }) }));
}

关于javascript - 如何修复 React 中的 "TypeError: categories.map is not a function"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55961507/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com