tengo una matriz, llamada reportsData , luego necesito filtrarla, generando algunas casillas de verificación con cada una de ellas con una etiqueta basada en cada nombre que proviene de otra matriz (emittersData), así que básicamente lo configuro así:
const [searchUser, setSearchUser] = useState<string[]>([])
const mappedAndFiltered = reportsData .filter((value: any) => searchUser.length > 0 ? searchUser.includes(value.user.name) : true )Luego renderizo mis casillas de verificación de esta manera:
function EmittersCheckboxes () { const [checkedState, setCheckedState] = useState( new Array(emittersData.length).fill(false) ) const handleOnChange = (position: any, label: any) => { const updatedCheckedState = checkedState.map((item, index) => index === position ? !item : item ) setSearchUser((prev) => prev.some((item) => item === label) ? prev.filter((item) => item !== label) : [...prev, label] ) setCheckedState(updatedCheckedState) }; return ( <div className="App"> {emittersData.map((value: any, index: any) => { return ( <li key={index}> <div className="toppings-list-item"> <div className="left-section"> <input className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded" type="checkbox" id={`custom-checkbox-${index}`} name={value.Attributes[2].Value} value={value.Attributes[2].Value} checked={checkedState[index]} onChange={() => handleOnChange(index, value.Attributes[2].Value)} /> <label className="ml-3 font-medium text-sm text-gray-700 dark:text-primary" htmlFor={`custom-checkbox-${index}`}>{value.Attributes[2].Value}</label> </div> </div> </li> ); })} </div> ) } Y en el componente de reacción estoy representando cada casilla de verificación, que es una li , como:
<ul><EmittersCheckboxes /></ul> Y renderizo mappedAndFiltered al final.
Entonces está bien, cuando hago clic en cada casilla de verificación generada, filtra la matriz configurando el estado en el usuario setSearch y la matriz se filtra.
Puedes comprobarlo aquí: streamable. com /v6bpk6 Vea que el filtro funciona, la cantidad total de elementos en la matriz cambia según la casilla de verificación seleccionada (uno o más).
Pero la cuestión es que cada casilla de verificación no se 'marca', permanece en blanco (sin activar).
¿Qué estoy haciendo mal, por qué no se comprueba solo?
Ha definido su componente EmittersCheckboxes dentro de otro componente. y cada vez que el componente principal se procesa (por cambio de estado), su componente interno se redefine, lo que hace que pierda el estado interno que React tiene para usted una y otra vez.
He aquí un ejemplo simplificado:
import React, { useState } from "react"; function CheckboxeComponent() { const [checkedState, setCheckedState] = useState(false); return ( <div> <span>CheckboxeComponent</span> <input type="checkbox" checked={checkedState} onChange={() => setCheckedState((x) => !x)} /> </div> ); } export default function App() { const [counter, setCounter] = useState(1); function InternalCheckboxeComponent() { const [checkedState, setCheckedState] = useState(false); return ( <div> <span>InternalCheckboxeComponent</span> <input type="checkbox" checked={checkedState} onChange={() => setCheckedState((x) => !x)} /> </div> ); } return ( <> <InternalCheckboxeComponent /> <CheckboxeComponent /> <button onClick={() => setCounter((c) => c + 1)}>{counter}</button> </> ); } Está la App (componente principal) con su propio estado ( counter ), con un botón para cambiar este estado, al hacer clic en este botón aumentará el contador, lo que provocará una nueva representación de la aplicación. Esta nueva representación redefine un nuevo componente llamado InternalCheckboxeComponent en cada representación.
El InternalCheckboxeComponent también tiene un estado interno ( checkedState ).
Y hay un componente funcional definido externamente llamado CheckboxeComponent , con este componente React puede mantener su propio estado, porque no está redefinido (es la misma función)
Si configura el estado de cada uno para que esté "marcado" y hace clic en el botón, esto provocará una nueva representación de App , esto redefinirá la función InternalCheckboxeComponent , lo que hará que React pierda su estado. y el estado CheckboxeComponent permanece en React ya que es la misma función.