Estoy trabajando con una API en Next.js y estoy tratando de hacer que un botón Atrás/Siguiente funcione. Sin embargo, con mi código, obtengo un "res no está definido". ¿Cómo uso correctamente los condicionales con una solicitud de búsqueda en espera?
const Page = () => { const [page, setPage] = useState(1); const [data, setData] = useState(null); const fetchContent = async (button) => { if (button === "back" && page > 1) { const res = await fetch( `http://api-page.com/content/pagination[page]=${page}` ); setPage(page - 1); } else if (button === "next") { const res = await fetch( `http://api-page.com/content/pagination[page]=${page}` ); setPage(page + 1); } else { const res = await fetch( `http://api-page.com/content/pagination[page]=${page}` ); } const data = await res.json(); setData(data.data); }; useEffect(() => { fetchContent(); }, []); return ( <div> <button onClick={() => { fetchContent("back"); }} > Prev page </button> <button onClick={() => { fetchContent("next"); }} > Next page </button> ); }; export default Page;Tus condicionales se ven bien. El problema es que const (y let ) tienen un alcance de bloque: desaparecen tan pronto como finaliza el bloque en el que se definieron. Aquí está su situación, simplificada:
{ const a = 1; console.log("inside a block", a); // 1 } console.log("outside a block", a); // ReferenceError La solución: hacer que res no sea una constante y declararlo en el ámbito en el que lo usará:
let a; { a = 1; console.log("inside a block", a); // 1 } console.log("outside a block", a); // 1declarando variables const dentro de bloques de código, no puede acceder desde bloques externos.
tienes que sacar esa res del bloque.
y debería funcionar
const fetchContent = async (button) => { let res; // out of the block if (button === "back" && page > 1) { res = await fetch( `http://api-page.com/content/pagination[page]=${page}` ); setPage(page - 1); } else if (button === "next") { res = await fetch( `http://api-page.com/content/pagination[page]=${page}` ); setPage(page + 1); } else { res = await fetch( `http://api-page.com/content/pagination[page]=${page}` ); } const data = await res.json(); setData(data.data); };