Estoy tratando de crear un sitio web de comercio electrónico y me encontré con un problema que parece que no puedo resolver. Soy muy nuevo en reaccionar y JS, así que ten un poco de paciencia, por favor :)
Declaré 4 useStates en mi app.js:
const [elementeDinState, setElementeDinState] = useState([]); const [currentCategorie, setCurrentCategorie] = useState("Acasa"); const [subCategorie, setSubcategorie] = useState([]); const [cartContents, setCartContents] = useState([]); const fetchData = useCallback(async () => { const data = await getCategories(); setElementeDinState(data); }, []); useEffect(() => { fetchData().catch(console.error); }, [fetchData]); const changeHeader = (dataFromMenuItem) => { setCurrentCategorie(dataFromMenuItem); }; const changeCopiiContent = (data1FromThere) => { setSubcategorie(data1FromThere); }; const changeCart = (dataFromCart) => { setCartContents(dataFromCart); };Estoy pasando las funciones para cambiar esos estados a diferentes componentes secundarios como accesorios. mi problema es que, cuando agrego artículos al carrito, se activa un renderizado de mi componente (componente de lista de productos) que no debería verse afectado por cartContents y que restablece el estado de dicho componente al valor inicial que cambia los artículos que se muestran. ¿useState hook crea un único estado global compuesto por todos esos estados?
Si estos useState se definen en app.js y luego se transmiten, cuando un niño los use persiguiendo el estado sucederá en app.js , por lo que todos los niños de <App /> se volverán a representar.
Supongo que tu app.js se ve similar:
function App() { const [elementeDinState, setElementeDinState] = useState([]); // ...and the other hooks and methods return ( <cartContents setElementDinState={setElementeDinState} /> <ProductList /> ) } En este caso, el estado está en el componente, por lo que cuando <CartContents /> lo cambie, activará una nueva representación del <ProductList /> incluido.
Para evitar este problema, piense mejor cuándo debe ser cada parte del estado y coloque el estado lo más cerca posible de ese componente. Por ejemplo, si el estado del carrito no influye en la lista de Productos. Mueva useState en el componente <Cart /> .
bueno, parece que quería cambiar la forma en que reacciona, así que encontré una solución, según lo que me dijeron. Declaré el estado del componente de productos en el componente principal y agregarlo al carrito ahora no fuerza una actualización de los elementos que se muestran. ¡gracias!
Por lo que entiendo, su problema es que simplemente está restableciendo el estado cartContents cada vez que llama a la función changeCart , ¿correcto?
Lo que probablemente desee es agregar (¿o eliminar ?) el artículo al carrito, ¿así?
const changeCart = (dataFromCart) => { setCartContents(oldContents => [...oldContents, dataFromCart]); };