problem in useEffect hook to fetch api in React.js

Question

This is bootcamp.js file in react project

import React, { Component, useState, useEffect } from 'react';

const Bootcamps = () => {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [bootcamps, setBootcamps] = useState();

  const loadData = async () => {
    const response = await fetch('http://localhost:5000/api/v1/bootcamps');
    const data = await response.json();

    setIsLoaded(true);
    setBootcamps(data);
    console.log(data);      // showing data
    console.log(bootcamps); // showing undefined
  };

  useEffect(() => {
    loadData();
  }, []);

........
......
...

the console.log(bootcamps) is showing undefined. Plzz help

Gabriel Alcântara · Accepted Answer · 2021-12-30T14:14:13.483

4

setBootcamps is asynchronous, so you cant see the result immediatly after the setter function gets called.

You can add another useEffect with the bootcamps state as a dependency. So, when bootcamps change (after the state is set) you do something.

  useEffect(() => {
    console.log({ bootcamps });
  }, [bootcamps]);

edited Dec 30 '21 at 14:14

answered Jan 29 '21 at 18:32

Gabriel Alcântara

616
4
11

score 2 · Answer 2 · answered Jan 29 '21 at 19:25

If u want you can try like this;

const loadData = async () => {
    const response = await fetch('http://localhost:5000/api/v1/bootcamps');
    const data = await response.json();

    setIsLoaded(true);
    setBootcamps(data);
  };



useEffect(() => {
    loadData();
   console.log(bootcamps)
  }, [bootcamps]);

Because your dependacy missing and i dont know your data type but your data is a object maybe if u want try;

const [bootcamps, setBootcamps] = useState({});

problem in useEffect hook to fetch api in React.js

2 Answers2