Tengo tres casillas de verificación que, cuando se seleccionan, activan una función. Estoy usando React-Bootstrap y mi código es así:
let departmentArray = ([]); function handleCheck(val) { //DEPARTMENT ARRAY LOAD const index = departmentArray.indexOf(val); if (index > -1) { departmentArray.splice(index, 1); } else { departmentArray.push(val); } //REACT COMPONENT if (val === "Maintenance") { setMaintCheck(!maintCheck); } else if (val === "Process") { setProcCheck(!procCheck); } else if (val === "Toolroom") { setToolCheck(!toolCheck); } }; return ( <> <Form.Check name={'department'} onClick={(e) => {handleCheck("Maintenance")}} checked={maintCheck} /> <Form.Check name={'department'} onClick={(e) => {handleCheck("Process");}} checked={procCheck} /> <Form.Check name={'department'} onClick={(e) => {handleCheck("Toolroom");}} checked={toolCheck} /> </> )El estado de las casillas de verificación funciona con este código, pero la matriz departmentArray no funciona si el código debajo de //REACT COMPONENT está presente. Si elimino estas líneas, el archivo departmentArray se carga correctamente. No tengo idea de por qué los dos se estarían afectando mutuamente.
El departmentArray parece ser un var normal para React, cuando el código que está debajo de // REACT COMPONENT ejecuta el componente se vuelve a representar y el departmentArray se reinicializa a []. Puede sacar a departmentArray del componente como una constante o declararlo como una variable de estado para que el componente reaccione a sus cambios.
Esto es lo que quiero decir:
const departmentArray = [] const component = (props) => { const loadData = () => { // get data from somewhere departmentArray.push(...) } return <></> }O puede declarar departmentArray como una variable de estado:
const [departmentArray, setDepartmentArray] = useState([]) const loadDepartments = () => { // load data } useEffect(loadDeparments, [])