Tengo un estado establecido como
const [filteredProducts, setFilteredProducts] = useState([]);Quiero poder agregar al final de ese estado. actualmente estoy intentando
products.forEach((product) => { if (product.category === category) { setFilteredProducts([...filteredProducts, product]); } });Recorre correctamente la matriz de productos. Incluso puedo registrar el producto después de setFilteredProducts y registra los correctos que quiero. Estoy llamando a esto con un onClick.
Encuentre todos los productos que desea agregar:
const productsToAdd = products.filter(product => product.category === category)Luego añádelos
setFilteredProducts((currentFilteredProducts) => ([...currentFilteredProducts, ...productsToAdd])); El problema con su ejemplo es que los filteredProducts pueden volverse obsoletos después de la primera iteración. setFilteredProducts no se ejecutará sincrónicamente, y filteredProducts mantendrá el valor original, hasta que se vuelva a procesar.
Solo agregaría la última coincidencia a la matriz filteredProducts existente.
Puede agregar todas las coincidencias así:
setFilteredProducts([...filteredProducts, ...products.filter((product) => product.category === category)]);Te recomiendo que hagas esto en 2 pasos:
Cree una matriz de los nuevos productos que planea agregar
let productsToAdd = []; products.forEach((product) => { if (product.category === category) { productsToAdd.push(product); } });Luego combine las matrices y establezca el estado
setFilteredProducts([...filteredProducts, ...productsToAdd]);