Question

我正在尝试使用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" 
        }
    ]
}

Answer 1

尝试一下

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

Answer 2

您可以尝试以下方法：

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

如documentation中对React Hooks所述，用于更新状态的函数带有一个用于更新状态本身的参数，因此无需在setCursos方法内传递其他函数为了更新您的状态。

Answer 3

我认为这并不精确。
因此，我更改了此路径/-> /api/cursos

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

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

无法使用useState和axios响应与数组更新状态

3 个答案: