Tengo el requisito de mostrar productos según las casillas de verificación. Si no se cambia ninguno, la matriz debe estar vacía. Si la casilla de verificación de hombres está activada, se mostrarán productos relacionados con hombres y lo mismo para la casilla de verificación de mujeres. Si ambos están activados, se mostrarán ambos productos relacionados. Cuando el usuario alterna entre hombres y mujeres, los productos respectivos se muestran/ocultan correctamente, pero algo falla al alternar entre hombres y mujeres y recibe muchas advertencias de la consola relacionadas con la tecla de reacción. Esto es lo que he intentado hasta ahora.
const root = ReactDOM.createRoot(document.getElementById("root")) const initialArray = [ { title: "Belts", for: "men" }, { title: "Makeup", for: "women" } ]; function App() { const [menToggle, setMenToggle] = React.useState(false); const [womenToggle, setWomenToggle] = React.useState(false); const [products, setProducts] = React.useState([]); React.useEffect(() => { if (menToggle) { setProducts((prev) => [ ...prev, ...initialArray.filter((item) => item.for === "men") ]); } if (!menToggle) { setProducts((prev) => [...prev.filter((item) => item.for !== "men")]); } if (womenToggle) { setProducts((prev) => [ ...prev, ...initialArray.filter((item) => item.for === "women") ]); } if (!womenToggle) { setProducts((prev) => [...prev.filter((item) => item.for !== "women")]); } }, [menToggle, womenToggle]); return ( <div className="App"> <label> <input type="checkbox" checked={menToggle} onChange={() => setMenToggle((prevValue) => !prevValue)} /> Men </label> <label> <input type="checkbox" checked={womenToggle} onChange={() => setWomenToggle((prevValue) => !prevValue)} /> Women </label> <div> {products && products.length > 0 && products.map((item) => <li key={item.title}>{item.title}</li>)} </div> </div> ); } root.render(<App />) <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <div id="root"></div>Gracias por adelantado
Creo que no necesita establecer el estado del producto cada vez que el usuario cambia los filtros activos porque puede derivar ese valor del estado. Además, preferiría crear una lista de filtros activos en lugar de tener cada uno en estados separados. Estos filtros tienden a escalar y desglosarlos puede ser difícil de manejar.
Se me ocurrieron dos soluciones, una usando Array y una "mejor" usando Set .
const root = ReactDOM.createRoot(document.getElementById("root")) const initialArray = [ { title: "Belts", for: "men" }, { title: "Makeup", for: "women" } ]; function App() { const [menToggle, setMenToggle] = React.useState(false); const [womenToggle, setWomenToggle] = React.useState(false); const [products, setProducts] = React.useState([]); React.useEffect(() => { if (menToggle) { setProducts((prev) => [ ...prev, ...initialArray.filter((item) => item.for === "men") ]); } if (!menToggle) { setProducts((prev) => [...prev.filter((item) => item.for !== "men")]); } if (womenToggle) { setProducts((prev) => [ ...prev, ...initialArray.filter((item) => item.for === "women") ]); } if (!womenToggle) { setProducts((prev) => [...prev.filter((item) => item.for !== "women")]); } }, [menToggle, womenToggle]); return ( <div className="App"> <label> <input type="checkbox" checked={menToggle} onChange={() => setMenToggle((prevValue) => !prevValue)} /> Men </label> <label> <input type="checkbox" checked={womenToggle} onChange={() => setWomenToggle((prevValue) => !prevValue)} /> Women </label> <div> {products && products.length > 0 && products.map((item) => <li key={item.title}>{item.title}</li>)} </div> </div> ); } root.render(<App />) <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <div id="root"></div>