当前位置: 首页 > 知识库问答 >
问题:

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

白弘伟
2023-03-14

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

共有3个答案

艾雪风
2023-03-14

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

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

    res.send(listaCursos);
    res.status(200);
});
黄信厚
2023-03-14

你可以试试这个:

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

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

詹正浩
2023-03-14

试试这个

useEffect(() => {
        axios
            .get('/api/cursos')
            .then(res => {
                setCursos([...cursos, res.data]);  
            })
    }, []);
 类似资料:
  • 我正在尝试使用注册功能组件中的useState更新组件的状态。当用户输入无效的电子邮件地址并单击“提交”按钮时,以下代码将返回错误消息 我想用这段代码将错误消息设置为formData。 如何将错误消息设置为formData? 这是我的密码:

  • 问题内容: 我发现React Hooks文档的这两部分有些令人困惑。使用状态挂钩更新状态对象的最佳实践是哪一种? 想象一下要进行以下状态更新: 选项1 从使用React Hook的文章中,我们可以做到: 所以我可以做: 然后: 选项2 从钩子参考中我们可以得出: 与类组件中的setState方法不同,useState不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法结合使用来复制此行

  • 我发现这两个反应钩文档有点混乱。使用状态钩子更新状态对象的最佳实践是哪一个? 假设一个用户希望进行以下状态更新: 选择1 从使用React Hook一文中,我们可以看出这是可能的: 所以我可以做: 然后呢: 选择2 从Hooks参考中我们得到: 与类组件中的setState方法不同,useState不会自动合并更新对象。通过将函数更新程序窗体与对象扩展语法相结合,可以复制此行为: 据我所知,两者都

  • 我想根据等于传递的属性删除嵌套对象。此时,将替换整个对象。当我尝试使用useState更新状态时,我遗漏了一些东西,可能是我循环对象的方式? 更新:问题已关闭,以响应更新嵌套对象的可用答案。这个问题涉及阵列,我认为这是当前问题的一部分。请注意此问题与的性质差异。可能需要使用语句,或者使用不同的方法对id进行过滤。。 我的初始对象看起来像这样: 我这样浏览每一项:

  • 我试图更新包含我的复选框数据的对象数组。当用户单击复选框时,我需要更新值字段。我想我可以通过使用数组中的映射,然后使用扩展运算符来更新状态来实现这一点。 我的疑问是为什么使用查找方法时状态会更新?我以为只有设置方法可以更新状态。如果这是一个明显的错误,请提前道歉。 请检查更改输入功能。