javascript - 如何修复 React 中的“TypeError:categories.map 不是函数”错误
问题描述
我不断收到这个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;
解决方案
您可以将您的属性对象映射到数组并处理它。
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 }) }));
}
推荐阅读
- python - BeautifulSoup >> IndexError:列表索引超出范围
- c# - IMAP:查询获取所有回复邮件并获取父邮件的ID
- enums - 如何从枚举中的结构中提取字段(无可辩驳的 if-let 模式)
- r - 我可以使用 RShiny 打开 RMarkdown 文件吗?
- sitecore - Sitecore 媒体库 - 缺少替代文字
- c++ - 如何在 C/C++ 中使用 FD_SET Unix 设置套接字文件描述符
- javascript - 更新 Redux 存储中的嵌套对象
- javascript - JS 相等运算符(如 ===)可以与嵌入类型一起使用吗?
- java - OpenCSV,如何通过自定义处理写入 csv?
- c++ - 在多次运行中获得一致的 callgrind 输出