如何解决对象作为React子对象无效找到:带有键的对象...
我正在尝试设置状态。这是我的代码:
import React,{ Component,useRef,Fragment,useEffect,useState } from "react";
import axios from "axios";
const Cart = (props) => {
const [useCart,setCart] = useState([]);
useEffect(() => {
(async () => {
const result = await axios
.get('https://example.com/sample')
.then((res) => {
setCart(res.data);
})
.catch((err) => {
console.error(err);
});
})();
},[]);
console.log(useCart);
return (
<div></div>
);
}
export default Cart;
API返回的值如下:
[
{
'id': 5,'qwe': 'qwe','asd': [
{
'aaa': 'aaa','bbb': 'bbb'
}
],'zxc': 'zxc'
},{
'id': 7,'zxc': 'zxc'
}
]
我没有在组件上渲染它。我只是想控制台记录它。但是它会给出这样的错误:
Error: Objects are not valid as a React child (found: object with keys {id,qwe,asd,zxc}). If you meant to render a collection of children,use an array instead.
我不明白,我在哪里做错了。
解决方法
不知道您的代码出了什么问题,但是也许我可以帮助您调试它。我将您的API响应复制到文件中,然后将其简单地导入组件内部的变量中。然后,我将状态设置为该变量,然后一切正常,所有控制台日志和其他一切正常。在这里查看-
https://codesandbox.io/s/angry-ramanujan-3k97v?file=/src/App.js
这告诉我问题可能出在您处理API响应的useEffect
上。
我所做的一个更改,我认为您也应该在注销状态变量时执行此操作,您应该在生命周期挂钩中执行此操作。因此,您应该将console.log(useCart);
放在其中
useEffect(()=>{ console.log(useCart); },[useCart])
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。