Is there anyway to get a async function run before the main functional component in React js?

Question

I have to get data from an API using a URL. The problem is I need to get a particular piece of data when the page loads and concatenate to my URL. Then I will fetch data using the URL.

var genre_id;
var genre;
const MOVIE_URL = `https://api.themoviedb.org/3/discover/movie?${API_KEY}&with_genres=${genre_id}`

I will get that particular piece of data using the useNavigate hook (which can only be called in the main functional component).

This is the asynchronous function that will fetch the data using the URL:

async function getMovieImg(url) {
  let response = await fetch(url);
  let res = response.json()
  res.then(data => {

    for (var i = 0; i < data.results.length; i++) {
      ratings.push(data.results[i].vote_average);
    }
  })

And this is the main functional component:

function MovieDetails() {    
  const location = useLocation();
  genre_id = location.state.id;    {/* This is the piece of data i want in my url*/}
  return (
      <div>
         <p>{ratings}</p>
      </div>
  )
}

So to recap, I have a URL. I need to get the id of the page (a particular piece of data) and add it to my URL. I can do that using useNavigate hook. However, that hook is called only in the main functional component. And I will fetch data using an asycn function. So basically, async function will run after the main functional component(moviedetails()). Therefore, the data that I will get from the async function will be nothing and thus, I am not able to display that data in the main functional component.

Any help would be appreciated. I need to get the id of page using a hook and at the same time, run an async function.

But how will I get the data using fetch and resolve it. I need it in a JSON format — Moaaz Siddiqui, Jul 11 '22 at 19:40
Why can't you move `getMovieImg` inside the component, or pass it down in the component props so you can call it after you get the id? — Andy, Jul 11 '22 at 19:44
If i move getMovieImg inside the main component, it would be ignored due to async and everything after that function will be displayed. i.e., my arrays would be empty and I wouldn't be able to render the data. After all rendering, the async function would run — Moaaz Siddiqui, Jul 11 '22 at 19:48
Where is the function currently? Is is in a parent component? — Andy, Jul 11 '22 at 19:51
@Andy MovieDetails() is the main functional components, and getMovieImg() is the asycn function — Moaaz Siddiqui, Jul 11 '22 at 20:13
"*I can do that using useNavigate hook.*" - I don't see that hook used in your code, there's only `useLocation()`? — Bergi, Jul 11 '22 at 21:07

score 0 · Answer 1 · answered Jul 11 '22 at 19:51

0

Putting this as an answer as too much for a comment but my not fully complete your code update:

async function getMovieImg(url) {
  let response = await fetch(url);
  let res = await response.json()
  for (var i = 0; i < res.results.length; i++) {
      ratings.push(res.results[i].vote_average);
  }
}

// call it somewhere
getMovieImg(url)

Here the await on the response and your await fetch, you don't need .then() which effectively makes this act sync but still async under the covers so to speak

answered Jul 11 '22 at 19:51

Mark Schultheiss

32,614
12
69
100

This is not quite a duplicate but may also help here https://stackoverflow.com/q/54034875/125981 – Mark Schultheiss Jul 11 '22 at 19:55
I did what you said, and then I called the getMovieImg in my main functional component, but the ratings variable is still not getting rendered on screen. – Moaaz Siddiqui Jul 11 '22 at 20:10
Yea, this was just a super quick example (not a full set) and I have no idea what `ratings` is where it is declared or or how you used it and was mainly focused on the call to get the data which you can test that part by a `console.log()` in the right place – Mark Schultheiss Jul 11 '22 at 21:45

score 0 · Answer 2 · answered Jul 11 '22 at 20:33

I'm not sure how your own url looks like and I can see in your code that you are getting a genreid from useLocation.state.id. In my example i'm using queryParameters in the url ex: https://ykmpvf.csb.app/?genreid=123 and then i'm using the useQueryParam hook to get the query parameter value:

import { useEffect, useState } from "react";
import { useSearchParams, useLocation, BrowserRouter } from "react-router-dom";

const API_KEY = "";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <h1>Hello World!</h1>
        <MainComponent />
      </BrowserRouter>
    </div>
  );
}

const MainComponent = () => {
  const [searchParams] = useSearchParams(); // or get the genreid from useLocation() like you do in your code
  const genreId = searchParams.get("genreid");

  const [ratings, setRatings] = useState([1, 2]);

  useEffect(() => {
    const fetch = async () => {
      try {
        const url = `https://api.themoviedb.org/3/discover/movie?${API_KEY}&with_genres=${genreId}`;
        let response = await fetch(url);
        let res = await response.json();

        setRatings(res.results.map((x) => x.vote_average));
      } catch (e) {}
    };

    fetch();
  }, [genreId]);

  return <DataComponent data={ratings} />;
};

const DataComponent = ({ data }) => {
  return (
    <div>
      <ul>
        {data.map((x) => (
          <li key={x}>{x}</li>
        ))}
      </ul>
    </div>
  );
};

codesandbox example here: https://codesandbox.io/s/friendly-borg-ykmpvf

Is there anyway to get a async function run before the main functional component in React js?

2 Answers2