Tengo una pregunta. Tengo un componente que al ingresar a /category/:categoryId se procesa haciendo un efecto en "api url + categoryId". Mi problema es que si cambio de una categoría a otra la página solo cambia si el useEffect se ejecuta infinitamente lo que genera problemas a la vista como se ve a continuación. ¿Cómo puedo hacer que se ejecute una vez y cuando cambio de /category/1 a /category/2 useEffect se ejecuta correctamente?
const Categories = () => { let [producto, productos] = useState([]); const { categoryId } = useParams(); useEffect(() => { fetch('https://fakestoreapi.com/products/category/' + categoryId) .then(res=>res.json()) .then(data=>productos(data)) },[]); console.log(producto) return( <div className="container"> {producto.map((p) => ( <Producto title={p.title} price={p.price} description={p.description} image={p.image} key={p.id} id={p.id} /> ))} </div> ) } export default Categories;Mi archivo de enrutador:
<Route path="/category/:categoryId" component={Categories} />Este es el problema que se genera, llega un momento en que se hace un fetch a una categoría solicitada previamente y luego se ejecuta la nueva categoría solicitada.
Simplemente puede agregar categoryId al argumento de matriz useEffect . Se llama a la función dentro de useEffect , solo cuando cambia categoryId
useEffect(() => { fetch('https://fakestoreapi.com/products/category/' + categoryId) .then(res=>res.json()) .then(data=>productos(data)) },[categoryId]);no puede editar producto directamente, debe usar productos:
const Categories = () => { let [producto, productos] = useState([]); const { categoryId } = useParams(); useEffect(() => { fetch('https://fakestoreapi.com/products/category/' + categoryId) .then(res=>res.json()) .then(data=>productos(data)) },[]); console.log(producto) return( <div className="container"> {producto && producto.map((p) => ( <Producto title={p.title} price={p.price} description={p.description} image={p.image} key={p.id} id={p.id} /> ))} </div> ) } export default Categories;