Estoy actualizando dos estados donde setProductsShow depende de setSelectedCategories . setSelectedCategories se actualiza primero, luego setProductsShow se actualiza para representar productos.
Hay muchas soluciones en las actualizaciones de estado de React y he leído otras respuestas al respecto, pero estoy confundido sobre el orden en que se actualizan los estados para mi caso específico.
[ { "name": "Potato", "category": "food" }, { "name": "iPhone", "category": "tech" } ] [ { "name": "tech", "menuSelect": false }, { "name": "food", "menuSelect": false } ] const [productsShow, setProductsShow] = useState(products) const [selectedCategories, setSelectedCategories] = useState(menuItems) // Default all items selected // Event is triggered by a change in menu selection; code not shown function handleChangeMenu(event) { let { name, checked } = event.target // Update categories based on menu selection setSelectedCategories(category => ( category.map(item => item.name == name ? { ...item, menuSelect: checked } : item) )) // If category is selected, then push onto an array let flatSelected = [] setSelectedCategories(c => { flatSelected = c.map(selected => { if (selected.menuSelect) { flatSelected.push(selected.name) } }) return c // Return the state since we're only reading }) console.log("FLATSELECTED") console.log(flatSelected) // Render products which are marked as TRUE in array of menu items "flatSelected[]" setProductsShow(() => { console.log("INSIDE SETPRODUCTSSHOW") console.log(products.filter(product => flatSelected.includes(product.category))) console.log("FLATSELECTED") console.log(flatSelected) products.filter(product => flatSelected.includes(product.category)) }) } El resultado que obtengo es console.log(products.filter(product => flatSelected.includes(product.category))) imprime una matriz vacía.
El problema es que está configurando el estado e intenta acceder al estado antes de que el componente se haya vuelto a procesar. La segunda vez que llama a las categorías setSelectedCategories no ha tenido tiempo de actualizarse.
Establezca el estado al final de la función y debería funcionar:
import { useState } from "react"; const products = [ { name: "Potato", category: "food", }, { name: "iPhone", category: "tech", }, ]; const menuItems = [ { name: "tech", menuSelect: false, }, { name: "food", menuSelect: false, }, ]; function App() { const [productsShow, setProductsShow] = useState(products); const [selectedCategories, setSelectedCategories] = useState(menuItems); function handleChangeMenu(event) { //mock the event let { name, checked } = { name: "tech", checked: true }; //updating catagory const newSelectedCategories = menuItems.map((category) => category.name === name ? { ...category, menuSelect: checked } : category ); //updating products const newProductsShow = products.filter((product) => newSelectedCategories.some( ({ name, menuSelect }) => name === product.category && menuSelect ) ); // Update state based on menu selection setSelectedCategories(newSelectedCategories); setProductsShow(newProductsShow); } return ( <div> <button onClick={handleChangeMenu}> Toogle tech </button> {productsShow.map((product) => ( <div> {product.name}</div> ))} </div> ); } export default App;