Solo quiero renderizar tarjetas de película en función de los resultados que provienen de la llamada ajax.
Actualmente, los componentes de las tarjetas de película se procesan en función de esa lista nombrada de matriz de código duro. Solo quiero hacerlo dinámico y reemplazarlo con mis datos ajax.
const getlist = async () => { const res = await fetch('http://localhost:3001/customize'); const data = await response.json(); getlist(); }; export default function Index() { const list = ['dexter', 'bb', 'got']; return ( <> <main className={parentstyle.main_container}> <NavBar /> <div className={style.searchbar_container}> <SearchBar /> </div> <div className={style.card_container}> {test.map((element, i) => { return <MovieCard movieName={element} key={i} />; })} </div> </main> </> ); }Use el gancho useState para configurar el estado de su componente (la lista ) y obtenga datos en un gancho useEffect ...
El gancho de efectos le permite realizar efectos secundarios en componentes de función:
La obtención de datos , la configuración de una suscripción y el cambio manual del DOM en los componentes de React son ejemplos de efectos secundarios. Ya sea que esté o no acostumbrado a llamar a estas operaciones "efectos secundarios" (o simplemente "efectos"), es probable que las haya realizado antes en sus componentes.
import { useEffect, useState } from "react" const getlist = async () => { const res = await fetch("http://localhost:3001/customize") if (!res.ok) { throw new Error(`${res.status}: ${await res.text()}`) } return res.json() } const Index = () => { const [ list, setList ] = useState([]) // start with an empty array useEffect(() => { getList() .then(setList) .catch(console.error) }, []) // empty dependencies array, this runs only once return ( // ... {list.map((element, i) => ( <MovieCard movieName={element} key={i} /> ))} // ... ) } export default Index