2

I'm trying to update the state of my component with useState, using data received with axios. The problem is that "setCursos" doesn't update "cursos", which starts as an empty array. I have tried a lot of things but none of them seems to work. Please help. This is what a have so far:

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;

and this is what I have in 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;

aaand the json file where I'm getting the data:

{
    "cursos": [
        {
            "id_curso": 0,
            "curso_nombre": "IPC2",
            "secciones": [],
            "universidad": "Universidad de San Carlos de Guatemala" 
        }
    ]
}
Noah
  • 21
  • 1
  • 4
  • What is `res.data`? Is it array? If so, you may need to spread it `setCursos(cursos => [...cursos, ...res.data]);` – Fyodor Yemelyanenko Dec 26 '19 at 06:11
  • Hi Noah, can you please share jsonFiles/cursosData.json snippet so can see the data structure and update the data into the state accordingly? – Govind Soni Dec 26 '19 at 06:16
  • and before updating the state you must try to console.log('Response: ', res) so we could be confirmed that what data we are getting from the axios! – Govind Soni Dec 26 '19 at 06:17
  • I tried console.log(res) and "data" throws the array that comes from my json file, but for some reason when I try to update the state with that array is still empty. – Noah Dec 26 '19 at 06:41

3 Answers3

1

Try this

useEffect(() => {
        axios
            .get('/api/cursos')
            .then(res => {
                setCursos([...cursos, res.data]);  
            })
    }, []);
akhtarvahid
  • 9,445
  • 2
  • 26
  • 29
1

You can try this instead: 

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

As stated on the documentation for React Hooks, the function that updates the state takes in a parameter which updates the state itself, hence there is no need to pass an additional function within your setCursos method in order to update your state.

wentjun
  • 40,384
  • 10
  • 95
  • 107
1

I think that It dosen't route precise.
So, I change this path / -> /api/cursos

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

    res.send(listaCursos);
    res.status(200);
});
seunggabi
  • 1,699
  • 12
  • 12