Actualmente estoy trabajando en un componente de filtro donde se pueden seleccionar varias casillas de verificación.
Ahora quiero alternar el estado de las casillas de verificación (que actualmente es posible y funciona) y almacenar las casillas de verificación marcadas en una matriz.
Si una casilla de verificación no está marcada, por supuesto, debe eliminarse de la matriz. Probé el gancho useState, pero sin éxito -> Las casillas de verificación se agregan varias veces y las que no están marcadas no se eliminan.
Aquí está el estado actual:
// Here I'm creating an array with a fixed size (based on the received data) const [checkboxState, setCheckboxState] = useState(new Array(receivedData.length).fill(false)); // With this useState I wan't to collect the checked checkboxes const [checkedCheckboxes, setCheckedCheckboxes] = useState([]); // This is my handler method that gets triggered when a checkbox get's checked/unchecked // ..and toggles the state of the checkbox const handleCheckboxState = (position: number) => { const updatedCheckedState = checkboxState.map((item, index) => (index === position ? !item : item)); setCheckboxState(updatedCheckedState); collectCheckedCheckboxes(); }; // With this method I wan't to push the checked checkboxes into the array // ..and remove the unchecked ones const collectCheckedCheckboxes = () => { checkboxState.map((item, index) => { if (item === true) { return checkedCheckboxes.push(receivedData[index]); } else { return checkedCheckboxes.slice(index, 1); } }); };Las casillas de verificación se representan así:
<div className="checkboxes"> {receivedData?.map((data, index) => ( <CheckBox value={data.value} checked={checkboxState[index]} onChange={() => handleCheckboxState(index)} /> ))} </div>¿Qué estoy haciendo mal?
Su componente CheckBox no contiene una propiedad key . Esto es útil para que React identifique qué elementos han cambiado, se agregaron o se eliminaron.
Fuente: https://reactjs.org/docs/lists-and-keys.html
Tampoco entiendo por qué tiene dos estados, checkboxState checkedCheckboxes . ¿Hay otra razón para esto? Creo que esto sería más fácil con un solo estado que contenga los índices (o valores) de las casillas de verificación marcadas.
[actualizar después de los comentarios]
El siguiente código es la solución deseada por OP para tener los valores de objeto seleccionados en un estado React.
const { useState } = React; const Checkboxes = () => { // With this useState I wan't to collect the checked checkboxes const [checkedCheckboxes, setCheckedCheckboxes] = useState([]); // This is my handler method that gets triggered when a checkbox get's checked/unchecked // ..and toggles the state of the checkbox const handleCheckboxChange = (data) => { const isChecked = checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value === data.value) if (isChecked) { setCheckedCheckboxes( checkedCheckboxes.filter( (checkedCheckbox) => checkedCheckbox.value !== data.value ) ); } else { setCheckedCheckboxes(checkedCheckboxes.concat(data)); } }; const receivedData = [{ value: "A" }, { value: "B" }, { value: "C" }]; return ( <> <div className="checkboxes"> <h1>Checkboxes:</h1> {receivedData?.map((data, index) => ( <input key={`cb-${index}`} value={data.value} type="checkbox" checked={checkedCheckboxes.some(checkedCheckbox => checkedCheckbox.value === data.value)} onChange={() => handleCheckboxChange(data)} /> ))} </div> <div> <h1>State:</h1> <pre>{JSON.stringify(checkedCheckboxes, null, 2)}</pre> </div> </> ); }; ReactDOM.render(<Checkboxes />, document.getElementById("app"));