无法使用useState和axios对数组[duplicate]的响应更新状态

Question

我正在尝试使用axios接收的数据，使用useState更新组件的状态。问题是“setCursos”不更新“cursos”，它以空数组开始。我试过很多东西，但似乎都不管用。请帮忙。这是a公司迄今为止所做的：

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const CursosAdmin = (props) => {
    const [cursos, setCursos] = useState([]);

    useEffect(() => {
        axios
            .get('/api/cursos')
            .then(res => {
                setCursos(cursos => [...cursos, res.data]);  
                console.log(cursos);
            })
    }, []);

    return(
        <div>
            <h1>pagina de admin</h1>
        </div>
    );
}

export default CursosAdmin;

这就是我在express中看到的：

const router = require('express').Router();
const cursosData = require('../jsonFiles/cursosData.json');

let listaCursos = cursosData.cursos;

router.get('/', (req, res) => {
    console.log(listaCursos);

    res.send(listaCursos);
    res.status(200);
});

module.exports = router;

aa和我获取数据的json文件：

{
    "cursos": [
        {
            "id_curso": 0,
            "curso_nombre": "IPC2",
            "secciones": [],
            "universidad": "Universidad de San Carlos de Guatemala" 
        }
    ]
}

Answer 1

我认为它没有精确的路线。
所以，我改变这个路径/-

// fix route path 
router.get('/api/cursos', (req, res) => {
    console.log(listaCursos);

    res.send(listaCursos);
    res.status(200);
});

Answer 2

你可以试试这个：

useEffect(() => {
    axios
        .get('/api/cursos')
        .then(res => {
            setCursos([...cursos, res.data]);  
            console.log(cursos);
        })
}, []);

正如React Hooks的文档中所述，更新状态的函数接受一个更新状态本身的参数，因此无需在setCursos方法中传递额外的函数来更新状态。

Answer 3

试试这个

useEffect(() => {
        axios
            .get('/api/cursos')
            .then(res => {
                setCursos([...cursos, res.data]);  
            })
    }, []);