Fetching data from mongoose

Question

I'm trying to fetching my data from mongo to the client-side to react. I succeed to set the state of the component to the correct fields from the endpoint API of my DB. But when I want to print my state to see if it is working the console print my an empty object although the state change and I see it in the console.[enter image description here][1]

getDataFromDb = () => {
    const req = new Request('http://localhost:5000/family',{
        method: 'GET',
        cache: 'default'
    });

    fetch(req).then(res=>{
        return res.json();
    }).then(data=>{
        console.log(data);
        this.setState({
            rooms: data
        });
        console.log(this.state.rooms);
    }).
    catch(err=>{
       console("Error: " + err);
    });
};

 componentDidMount() {
    this.getDataFromDb().then(result => this.setState({rooms: result}));
    //let rooms = this.formatData(this.getDataFromDb());
    //let featuredRooms = ...rooms.filter(room => room.featured===true);
    //let maxPrice = Math.max(...rooms.map(item=>item.price));
    //let maxSize = Math.max(...rooms.map(item=>item.size));
    //new code:
     let featuredRooms = this.state.rooms.filter(room=>room.featured===true);
     let maxPrice = Math.max(this.state.rooms.map(item => item.price));
     let maxSize = Math.max(this.state.rooms.map(item=> item.size));
    this.setState({
        // old code ---> rooms,
        //rooms,
        featuredRooms,
        sortRooms: this.state.rooms,
        //old code
        //sortedRooms:rooms,
        loading:false,
        price:maxPrice,
        maxPrice,
        maxSize
        });

    this.printData();
}

score 0 · Accepted Answer · answered Mar 18 '20 at 08:10

In react, setState is an async function. Printing the state (just after changing it) will not give you the latest state. If you want to trigger a function after setting the state you can do the following:

this.setState({
    // old code ---> rooms,
    //rooms,
    featuredRooms,
    sortRooms: this.state.rooms,
    //old code
    //sortedRooms:rooms,
    loading:false,
    price:maxPrice,
    maxPrice,
    maxSize
}, () => { this.printData(); });

Fetching data from mongoose

1 Answers1