javascript - 对象作为 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,
'qwe': 'qwe',
'asd': [
{
'aaa': 'aaa',
'bbb': 'bbb'
}
],
'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
这告诉我问题可能来自您useEffect
处理 API 响应的位置。
我做了一个改变,我认为你应该在注销状态变量时也这样做,你应该在生命周期钩子中进行。所以你应该把你的console.log(useCart);
里面
useEffect(()=>{ console.log(useCart); },[useCart])
推荐阅读
- jenkins - 如何设置 helm chart 以通过 https 访问 jenkins?
- elasticsearch - 指定 Metricbeat Prometheus 字段名称
- css - CSS背景图片动画变为空白
- c++ - 获取图片为base64并写入为JPG
- javascript - 在 Rxjs 6 中将以前的值作为数组发出?
- python - 将 qtreeview 项目设置为可通过上下文菜单编辑并自动将其设置回禁用?
- ios - 如何使用 swift 修复 CLIPS 中的 EnvEval 错误
- android - 如何在 Flutter 中使用 Web 服务?
- php - 从数组中获取值的快速方法,另一个数组给出条件
- uwp - 有没有办法动态更改列表视图及其项目样式