Estoy tratando de filtrar en una lista de objetos y he creado un objeto useState que mantendrá el estado de todos los filtros, que se ve así:

 const [filterState, setFilterState] = useState({ "sell": false, "buy": false, "startDate": "", "endDate": "", "location": "", "music": false, "theatre": false, "movie": false, });

Estoy usando dos Form.Check de "react-bootstrap" para cambiar los campos "vender" y "comprar", pero me están dando algunos problemas, el objeto filterState no cambia hasta que haya hecho clic en los objetos Form.Check dos veces, solo la interfaz de usuario se actualiza correctamente, lo cual es extraño cuando el objeto filterState decide el estado marcado. Entonces, lo que se muestra es lo opuesto al estado del objeto filterState.

Código para los campos Form.Check:

 <Form.Check checked={filterState.buy} onChange={onBuyChange} id="buy" type="checkbox" label={`Ønskes kjøpt`}/> <Form.Check checked={filterState.sell} onChange={onSellChange} id="sell" type="checkbox" label={`Til salgs`}/>

Las funciones onChange:

 const onSellChange = () => { setFilterState({ ...filterState, "sell": !filterState.sell } ); console.log(filterState); } const onBuyChange = () => { setFilterState({ ...filterState, "buy": !filterState.buy } ); console.log(filterState); }

Ejemplos

Estado inicial:

Hacer clic una vez no cambia el estado:

Al hacer clic nuevamente, se actualiza el estado, pero ahora está sincronizado:

Impresión antes y después de setFilterState

Otro comportamiento extraño que obtengo es que imprimir filterState antes y después de setFilterState da el mismo resultado. ¿Se debe cambiar filterState antes de pasar a la siguiente línea? ¿setFilterState funciona de forma asincrónica de alguna manera, lo que puede hacer que Form.Check lea antes de que el valor haya cambiado?