Блог

Я пытаюсь установить состояние. Вот мой код:

 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])