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

Question

我不断收到这样的错误消息：<grid id="postGrid" height="550px" model="@load(vm.pcdata.posts)" emptyMessage="No Posts."> <template name="model"> <row> <window border="normal"> <!-- .................. --> <!-- PARENT POST --> <!-- .................. --> <caption id="userPost" label="@load(each.user)"/> <textbox id="infoPost" readonly="true" value="@load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/> <separator bar="true"/> <hlayout> <div> <button label="Like" onClick="@command('addPLike', postid=each.postid)"/> </div> <div hflex="true"> <textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="@load(each.plikes)"/> </div> </hlayout> <separator bar="false"/> <window border="normal"> <!-- .................. --> <!-- THE SECOND GRID--> <!-- .................. --> <grid id="commentGrid" height="150px" model="@load(vm.pcdata.comments)" emptyMessage="No Comments."> <template name="model"> <row> <window border="normal"> <caption id="userComment" label="@load(each.user)"/> <textbox id="infoComment" readonly="true" value="@load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/> <separator bar="true"/> <hlayout> <div> <button label="Like" onClick="@command('addCLike', commentid=each.commentid)"/> </div> <div hflex="true"> <textbox id="likeTB" disabled="true" width="40px" style="text-align:center" value="@load(each.clikes)"/> </div> </hlayout></window></row></template></grid></window></window></row></template></grid> 不是一个函数，但我不明白为什么。我正在为从API调用接收的数据设置类别，但一直收到此错误。 另外，有没有一种方法可以轻松地调用父对象的子对象？ API数据嵌套大约4-5层深度，并且它们都有不同的名称，那么我将如何遍历所有这些数据？

categories.map在控制台中的外观示例（打开了一些嵌套对象）

这是我的组件：

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; 时，出现错误“未捕获的不变违规：对象作为React子对象无效（找到：带有键的对象...）”，然后列出对象中的所有键我打电话有谁知道我可以如何调用该函数（可能是递归的？）以将其应用于对象内的所有对象？

这是我更新的代码：

Object.keys

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

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

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

json