1

In director.js,

I am trying to get the data from fetchAPI() from /api/index.js

and set it as a state.

However, in recieveFetchApi(), after the first line , the second console.log says the state is an empty array.

What am I doing wrong here? How can I make sure that the state is successfully set?

director.js

import React, { Component, useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { fetchAPI } from "../../api/index";

function Director() {
  const [fetchedData, setfetchedData] = useState([]);
  const [fetchedDirector, setfetchedDirector] = useState([]);
  const recieveFetchApi = async (callback) => {
    setfetchedData(await fetchAPI()); //why is this being called forever?maybe this MovieName thing is rerendering, so that is why

    console.log(
      "ok, recievedFetch did the job, after this, ill call the extractDirectors func"
    );
    console.log("now, fetchedData looks like this", fetchedData); //not set yet at this point. why?

    callback();
  };

  useEffect(() => {
    recieveFetchApi(function () {
      extractDirectors();
    });
  }, []);

  const extractDirectors = () => {
    let directorArray = [];

    for (let i = 0; i < fetchedData.length; i++) {
      if (!directorArray.includes(fetchedData[i].director)) {
        directorArray.push(fetchedData[i].director);
      }
    }
    console.log("directorArray looks like this now", directorArray);
    setfetchedDirector(directorArray);
  };
  return (
    <div>
      <h1>Search By Director</h1>
      {fetchedDirector.map((director) => (
        <p key={director}>{director}</p>
      ))}
    </div>
  );
}

export default Director;

/api/index.js

import axios from "axios";

export const fetchAPI = async () => {
  let url = "https://ghibliapi.herokuapp.com/films";
  const data = await axios.get(url);
  console.log("the data we just got is like this", data.data);

  return data.data;
};
skyboyer
  • 22,209
  • 7
  • 57
  • 64
Hayato
  • 61
  • 1
  • 6
  • 2
    React state works asynchronously ... Hence it might not be set when you expect it to be there ... – Siddharth Seth May 31 '22 at 14:50
  • 1
    calling `setfetchedData` does not change the value in the local const `fetchedData`, it just asks react to rerender the component. When that new render happens, a new local variable will be created with the new value, but code from the old render has no access to that. If you need to use the new state right away, i recommend you save it to a variable, as in `const temp = await fetchAPI(); setfetchedData(temp); // do something else with temp after, eg callback(temp)` – Nicholas Tower May 31 '22 at 14:51
  • 1
    React state hooks are async - you can't expect to be able to console the result immediately. To look for changes, you should useEffect with that state in the dependency array. – Jlove May 31 '22 at 14:51
  • 1
    when you use 'await', you receive a 'promise' . Only when the request is fully processed and response has been sent, then, this promise will return a value. – Diego Favero May 31 '22 at 14:53

0 Answers0