0

I am making a request to my API from the client. I set the information in a React state. The weird thing is the following:

When I print the result of the fetch by console I get this: enter image description here

But when I display to see in detail, specifically the "explore" array, I get that the result is empty:

enter image description here

The explore array is passed to two components by props to show a list, the super weird thing is that one of the components shows the information but the other does not

enter image description here

Fetch

const baseUrl = process.env.BASE_API_URL;
import { marketPlace } from "./mock";
import { requestOptions } from "utils/auxiliaryFunctions";

const getInitialMarketPlaceData = async (username: string) => {
  try {
    return await fetch(
      `${baseUrl}marketplace/home/${username}`,
      requestOptions()
    )
      .then((data) => data.json())
      .then((res) => {
        console.log(res.data)
        if (res.success) {
          return res.data;
        }
      });
  } catch (err) {
    throw err;
  }
};

Components

export default function Marketplace() {
  const [marketPlace, setMarketPlace] = useState<any>();
  const [coachData, setCoachData] = useState<false | any>();
  const [coach, setCoach] = useState<string>();

  const { user } = useContext(AuthContext);

  useEffect(() => {
    if (!marketPlace) {
      getInitialMarketPlaceData(user.username).then((data) => {
        console.log("data", data);
        setMarketPlace(data);
      });
    }
  }, []);
  useEffect(() => {
    console.log("marketplace", marketPlace);
  }, [marketPlace]);

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

  const changeCoachData = async (coach: string) => {
    setCoach(coach);
    let res = await getCoachProfile(coach);
    setCoachData(res);
  };

  if (!marketPlace) {
    return <AppLoader />;
  }

  return (
    <main className={styles.marketplace}>
      {marketPlace && (
        // Highlited viene vacío de la API
        <Highlited
          highlitedCoaches={/*marketPlace.highlighted*/ marketPlace.explore}
        ></Highlited>
      )}
      {marketPlace.favorites.length !== 0 && (
        <Favorites
          changeCoachData={changeCoachData}
          favCoaches={marketPlace.favorites}
        ></Favorites>
      )}
      {
        <Explore
          changeCoachData={changeCoachData}
          exploreCoaches={marketPlace.explore}
        ></Explore>
      }
      {/*<Opinions
          changeCoachData={changeCoachData}
          opinions={marketPlace.opinions}
        ></Opinions>*/}
      {coachData && (
        <CoachProfileRookieView
          coachData={coachData}
          coachUsername={coach}
          isCoach={false}
          isPreview={false}
          onClose={() => setCoachData(false)}
        />
      )}
    </main>
  );
}
  • 2
    [Is Chrome’s JavaScript console lazy about evaluating objects?](https://stackoverflow.com/q/4057440) – VLAZ Sep 20 '22 at 13:23
  • 3
    See that blueish purple box with an "i" in it. That is telling you the content in the log was updated. – epascarello Sep 20 '22 at 13:24
  • I appreciate the answers, but I still don't understand what is wrong in the code. If I make the call to the API from Postman, the API returns the information correctly, with the "explore" array with content, but in the client at some point it is emptied and I cannot understand why or where. –  Sep 20 '22 at 13:29
  • 1
    The comments are telling you the console has a bug which lazily evaluates objects and updates older logs. So basically, you are only *seeing* the wrong values in the console. – kelsny Sep 20 '22 at 15:02

0 Answers0