After useEffect API call, state set by useState for json data being passed to a component as props r-CodePudding

Hi I'm still a beginner in React and I'm trying to use useEffect to fetch data from an API and then useState to set the state and then pass that state as props to a child component.

But in my child component it appears as an empty array each time when I do console.log. I understand that on first render the state of my initial useState is an empty array []. But I've been trying to combat this and send the right json data but can't seem to do so.

I am trying to do this as I have multiple child components that I wanna send data to.

Below is a work around I coded up with some digging around but doesn't work either:

   const api = 'url string'
    const [races, setRaces] = useState([]);
    const [races2, setRaces2] = useState([races]);

    useEffect(() => {
    fetch(api)
      .then((resp) => resp.json())
      .then((response) => setRaces(response));
  }, []);

  useEffect(() => {
    if (races.length) setRaces2(races);
  }, [races]);

<Child data={races2}

But this does not seem work to work either when I do console.log(props.data) in the child component.

This is how normally one would fetch data and try and send the data but in both cases its been the same.

   const api = 'url string'
    const [races, setRaces] = useState([]);

    useEffect(() => {
    fetch(api)
      .then((resp) => resp.json())
      .then((response) => setRaces(response));
  }, []);

<Child data={races}

Following is a rough flow diagram explaining what I wanna do:

Thank you for your help in advance.

CodePudding user response：

I made this quick example.

Here is what the code does:

Fetching the Data using UseEffect
Storing into State
Passing the State into Component as Props
Fetching the Props and Displaying the data.

Code for App.js

import "./styles.css";
import ChildComponent from "./ChildComponent";
import { useEffect, useState } from "react";

export default function App() {
  const [title, setTitle] = useState(null);
  // * Init on Page Load
  useEffect(() => {
    fetchTitle();
  }, []);

  const fetchTitle = async () => {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/posts/1"
    );
    const data = await response.json();
    setTitle(data.title); //Setting the response into state
  };

  return (
    <div className="App">
      <ChildComponent data={title} />
    </div>
  );
}

Code for ChildComponent.js

export default function ChildComponent({ data }) {
  return <div>{data}</div>;
}

I created this Codesandbox. This might help.

https://codesandbox.io/s/elegant-lumiere-cg66nt

CodePudding user response：

Array and object are referential data types, passing as array dependency will not re-run side effect. useEffect dependencies should be primitive data type (string, number, boolean,undefined or null).


 useEffect(() => {
    if (races.length) setRaces2(races);

  }, [races.length])// Dependencies must be primitive data type not referencial.