无法使用带有数组的useState和axios响应更新状态[重复]答案

【问题标题】：Can't update state using useState and axios response with array [duplicate]无法使用带有数组的useState和axios响应更新状态[重复]
【发布时间】：2020-04-16 11:04:42
【问题描述】：

我正在尝试使用通过 axios 接收的数据使用 useState 更新组件的状态。问题是“setCursos”不更新“cursos”，它以一个空数组开始。我已经尝试了很多东西，但它们似乎都不起作用。请帮忙。这是迄今为止所拥有的：

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;

这就是我的快递：

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" 
        }
    ]
}

【问题讨论】：

什么是res.data？是数组吗？如果是这样，您可能需要传播它setCursos(cursos => [...cursos, ...res.data]);
嗨，Noah，你能分享一下 jsonFiles/cursosData.json sn-p 以便查看数据结构并相应地更新数据到状态吗？
在更新状态之前，您必须尝试 console.log('Response: ', res) 以便我们可以确认我们从 axios 获得了什么数据！
我尝试了 console.log(res) 并且“data”抛出了来自我的 json 文件的数组，但是由于某种原因，当我尝试使用该数组更新状态时仍然是空的。跨度>

标签： reactjs axios

【解决方案1】：

我认为它的路线并不精确。
所以，我改变这条路径/ -> /api/cursos

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

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

【讨论】：

请为您的答案添加解释！

【解决方案2】：

你可以试试这个：

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

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：