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

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.

CodePudding user response：

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

CodePudding user response：

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