Tengo una matriz por defecto con todo el estado de la casilla de verificación como verdadero.
let initialarray = [{name: 'Approved', isChecked: true}, {name: 'Rejected', isChecked: true}, {name: 'Pending', isChecked: true}, {name: 'Cancelled', isChecked: true}] Todas las casillas de verificación están seleccionadas, como configuré marcadas como true
Cuando trato de desmarcar el estado aprobado, puedo actualizar el estado verificado del objeto respectivo a false .
Mi función OnChange se ve a continuación
const onChange = (e) => { const updatedStatus = initialarray.map((item) => item.name === e.target.name ? { ...item, isChecked: e.target.checked } : item ); }; updatedstatus= [{name: 'Approved', isChecked: false}, {name: 'Rejected', isChecked: true}, {name: 'Pending', isChecked: true}, {name: 'Cancelled', isChecked: true}] Cuando trato de desmarcar el nombre Rechazado, puedo actualizar el objeto de estado rechazado, pero el estado del nombre Aprobado vuelve a cambiar a true .
updatedstatus= [{name: 'Approved', isChecked: true}, {name: 'Rejected', isChecked: false}, {name: 'Pending', isChecked: true}, {name: 'Cancelled', isChecked: true}] Último estado actualizado que solo yo puedo cambiar. otro estado se estaba restableciendo a true
Esperado:
expected= [{name: 'Approved', isChecked: false}, {name: 'Rejected', isChecked: false}, {name: 'Pending', isChecked: true}, {name: 'Cancelled', isChecked: true}]Almacene esa matriz como un estado, ya que los estados persistirán entre las actualizaciones de los componentes.
Al configurar el estado en onChange , use una devolución de llamada que tome prevState .
const { useState } = React function App() { const [checkboxes, setCheckboxes] = useState( [ {name: 'Approved', isChecked: false}, {name: 'Rejected', isChecked: true}, {name: 'Pending', isChecked: true}, {name: 'Cancelled', isChecked: true} ] ) const onChange = (e) => { setCheckboxes(prevState => prevState.map((item) => item.name === e.target.name ? { ...item, isChecked: e.target.checked } : item )) }; console.log(checkboxes) return ( <div> {checkboxes.map((box, i) => <input type="checkbox" checked={box.isChecked} onChange={onChange} name={box.name} key={i} /> )} </div> ) } ReactDOM.render(<App />, window.root) <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id="root"></div>El problema es que está utilizando initialarray para actualizar el estado.
const updatedStatus = initialarray.map(... En lugar de eso, debe usar el objeto prevoState en la devolución de llamada setState .
const initialarray = [ { name: "Approved", isChecked: true }, { name: "Rejected", isChecked: true }, { name: "Pending", isChecked: true }, { name: "Cancelled", isChecked: true } ]; function App() { const [state, setState] = React.useState(initialarray); const onChange = (name) => { setState((prevState) => prevState.map((item) => item.name === name ? { ...item, isChecked: !item.isChecked } : item ) ); }; return ( <div> {state.map(({ name, isChecked }) => ( <React.Fragment key={name}> <input type="checkbox" id={name} checked={isChecked} onChange={() => onChange(name)} /> <label htmlFor={name}> {name}</label> <br /> </React.Fragment> ))} </div> ); } ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>También debe reemplazar initialStatus con el estado actualizado. Estás repitiendo una y otra vez el initialArray y nunca lo actualizas.
const onChange = (e) => { const updatedStatus = initialarray.map((item) => item.name === e.target.name ? { ...item, isChecked: e.target.checked } : item ); initialarray = updatedStatus; };