Tengo que obtener datos de una API usando una URL. El problema es que necesito obtener un dato en particular cuando se carga la página y concatenar con mi URL. Luego buscaré datos usando la URL.
var genre_id; var genre; const MOVIE_URL = `https://api.themoviedb.org/3/discover/movie?${API_KEY}&with_genres=${genre_id}`Obtendré ese dato en particular usando el enlace useNavigate (al que solo se puede llamar en el componente funcional principal).
Esta es la función asíncrona que obtendrá los datos usando la 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); } })Y este es el principal componente funcional:
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> ) }Para recapitular, tengo una URL. Necesito obtener la identificación de la página (un dato en particular) y agregarla a mi URL. Puedo hacer eso usando useNavigate hook. Sin embargo, ese gancho solo se llama en el componente funcional principal. Y buscaré datos usando una función asycn. Básicamente, la función asíncrona se ejecutará después del componente funcional principal (detalles de la película ()). Por lo tanto, los datos que obtendré de la función asíncrona no serán nada y, por lo tanto, no puedo mostrar esos datos en el componente funcional principal.
Cualquier ayuda sería apreciada. Necesito obtener la identificación de la página usando un gancho y, al mismo tiempo, ejecutar una función asíncrona.
Poner esto como una respuesta demasiado para un comentario, pero no puedo completar completamente la actualización de su código:
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) Aquí el await en la response y su await fetch , no necesita .then() lo que efectivamente hace que este acto se sincronice pero aún así asíncrono debajo de las sábanas, por así decirlo
No estoy seguro de cómo se ve tu propia URL y puedo ver en tu código que estás obteniendo un ID de género de useLocation.state.id. En mi ejemplo, estoy usando queryParameters en la url ej: https://ykmpvf.csb.app/?genreid=123 y luego estoy usando el gancho useQueryParam para obtener el valor del parámetro de consulta:
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> ); };ejemplo de codesandbox aquí: https://codesandbox.io/s/friendly-borg-ykmpvf