Tengo este componente que pretende recibir una ID de una categoría de productos, hacer una llamada al backend a través de una API y devolver los productos de esta categoría.
Para hacer esto, la primera vez que renderizo el componente realizo una llamada predeterminada sin parámetros opcionales a la API y devuelvo 10 elementos, por ejemplo.
Pero luego tengo unos filtros como el precio desde, precio hasta o la marca del producto que recopilo estos valores y los envío a la API para devolver un JSON con los productos.
Por esta razón, he creado una función "handleButtonCLick" que tiene como objetivo recopilar los valores de los filtros (cuadro de entrada) y realizar una llamada API a través de la publicación.
Por esta razón, he creado una función "handleButtonCLick" que tiene como objetivo recopilar los valores de los filtros (cuadro de entrada) y realizar una llamada API a través de la publicación.
import axios from 'axios' import GuestLayout from '@/components/Layouts/GuestLayout' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' const Name = ({ itemsList }) => { const router = useRouter() //const [itemsList, setItemsList] = useState([]) const handleButtonCLick = (event, value) => { const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ category_id: 100, }), } fetch( `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/category/`, requestOptions, ) .then(response => response.json()) .then(json => setItemsList(json)) } return ( <GuestLayout> <div> {itemsList.map((x, i) => ( {x.price}€ ))} </div> <div className="py-12"> <Button variant="outlined" onClick={handleButtonCLick}> Search items </Button> </div> </GuestLayout> ) } Name.getInitialProps = async context => { let valor = 1; const { data } = await axios.post( `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/category/${valor}/`, ) return { itemsList: data } } export default NameHago la llamada pero no se como configurar el resultado obtenido a "itemsList", porque si lo configuro asi me dice que no lo puedo volver a definir
const [itemsList, setItemsList] = useState([])Está tratando de declarar un estado React con el mismo nombre que ya se ha declarado para un accesorio. Simplemente use un nombre de variable diferente. Use un useEffect para guardar el itemsList pasado en el estado si/cuando se actualice, y actualice el procesamiento para mapear el estado de los items locales.
import axios from 'axios'; import GuestLayout from '@/components/Layouts/GuestLayout'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; const Name = ({ itemsList }) => { const router = useRouter(); const [items, setItems] = useState([]); useEffect(() => { setItems(itemsList); }, [itemsList]); const handleButtonCLick = (event, value) => { const requestOptions = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ category_id: 100, }), } fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/category/`, requestOptions, ) .then(response => response.json()) .then(json => setItems(json)); } return ( <GuestLayout> <div className="py-12"> <div> {items.map((x, i) => ( {x.price}€ ))} </div> </div> </GuestLayout> ); } Name.getInitialProps = async context => { let valor = 1; const { data } = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/category/${valor}/`); return { itemsList: data }; } export default Name;