将数组置于状态时出错 - React

Posted 2023-02-22

【中文标题】将数组置于状态时出错 - React

【英文标题】：Getting error while putting an array onto state - React

【发布时间】：2020-09-28 01:58:09

【问题描述】：

我正在从运行 MongoDB 的 Express 后端接收一个数组，目前正在使用 .toArray() 函数检索一个数组，后端一切正常。

所以问题是当我在前端接收数组时，我试图用 setState 函数将它传递给状态，它给了我这个错误

错误：对象作为 React 子项无效（发现：对象带有键 _id、uploaderId、uploaderName、title、subtitle、description、language、category、subcategory、currency、price、contents、likes、dislikes、coverImage、封面视频）。如果您打算渲染一组子项，请改用数组。

Here's an image of the object structure (the courses property is the one that has the retrieved array from the back-end)

实际的代码是这样的

axios(
                url: "/course/data",
                method: "GET",
                params: id: userInfo._id,
            ).then(response => 
                userInfo.courses = response.data;
                console.log(userInfo);
                this.setState(userInfo);
            ).catch(err => err ? alert(err) : null);

【问题讨论】：

错误信息告诉你出了什么问题！你的反应组件应该返回有效的 html 标记，或者 null。什么是前面提到的组件返回？

哦，谢谢，我没有注意到，但我忘记删除代码中的某处有 this.state.courses。我删除了它，现在很好！非常感谢@Frosty619

乐于助人！您可以点赞评论以表达您的感激之情：D

直到现在我都不知道你可以投票给 cmets。再次感谢！

【参考方案1】：

我的代码中有一个 this.state.courses 隐藏在本应为 this.state.courses.length 的位置，因此删除它可以解决问题，就像 @Frosty619 所说的那样。

【参考方案2】：

试试这个，

axios(
    url: "/course/data",
    method: "GET",
    params: id: userInfo._id,
).then(response => 
     userInfo["courses"] = response.data.courses;
     this.setState(userInfo:userInfo);


).catch(err => err ? alert(err) : null);