对象作为 React 子对象无效（找到：带键的对象...）

Posted 2023-02-16

【中文标题】对象作为 React 子对象无效（找到：带键的对象...）

【英文标题】：Objects are not valid as a React child (found: object with keys...)

【发布时间】：2020-12-28 14:00:49

【问题描述】：

我正在尝试设置一个状态。这是我的代码：

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.

我不明白，我哪里做错了。

【问题讨论】：

可以添加完整的组件代码吗？

你是如何使用useCart的？

@MattAft 我正在尝试控制台记录它

@ShubhamVerma 好的，现在编辑问题

我看不出这段代码有什么问题，你确定这就是你所拥有的吗？

【参考方案1】：

不知道您的代码出了什么问题，但也许我可以帮助您调试它。我将您的 API 响应复制到一个文件中，然后简单地将其在组件内导入到一个变量中。然后我将状态设置为该变量，一切正常，所有控制台日志和一切。看看这里-

https://codesandbox.io/s/angry-ramanujan-3k97v?file=/src/App.js

这告诉我问题可能来自您处理 API 响应的useEffect。

我做了一个更改，我认为您应该在注销状态变量时也这样做，您应该在生命周期挂钩中进行。所以你应该把你的console.log(useCart);放在这个里面 useEffect(()=> console.log(useCart); ,[useCart])