Así que he estado trabajando en esto por un tiempo, lo que estoy tratando de hacer es cambiar un valor marcado al hacer clic en la casilla de verificación.
Mi estado inicial se ve así:
const [todoList, setTodoList] = useState({ foundation: { steps: [ { key: "1", title: "setup virtual office", isDone: false }, { key: "2", title: "set mission and vision", isDone: false }, { key: "3", title: "select business name", isDone: false }, { key: "4", title: "buy domain", isDone: false }, ], }, discovery: { steps: [ { key: "1", title: "create roadmap", isDone: false }, { key: "2", title: "competitor analysis", isDone: false }, ], } });y mi mapa y la función onClick (updateCheckFoundation funciona cuando se hace clic en la casilla de verificación)
{todoList.foundation.steps.map((item) => { return ( <div> <input type="checkbox" defaultChecked={item.isDone} onClick={(event)=> updateCheckFoundation({ isDone:event.target.checked, key:item.key })}/> <span>{item.title}</span> </div> ); })}Entonces, ¿cómo puedo actualizar todoList usando setState?
mi código (función updateCheckFoundation) es así y no funciona :( :
const updateCheckFoundation = ({isDone, key}) => { const updateTodoList = todoList.foundation.steps.map((todo)=> { if(todo.key === key){ return { ...todo, isDone }; } return todo; }); setTodoList(updateTodoList); } Su devolución de llamada updateCheckFoundation no mantiene el estado invariable y, de hecho, descarta todo menos la matriz de estado de pasos de foundation.steps .
const updateCheckFoundation = ({isDone, key}) => { const updateTodoList = todoList.foundation.steps.map((todo)=> { if(todo.key === key){ return { ...todo, isDone }; } return todo; }); setTodoList(updateTodoList); // <-- only the state.foundation.steps array!! } En los componentes de función, al usar las funciones de actualización de estado de useState , debe manejar el estado de fusión ( el estado raíz ) y el estado anidado, usted mismo, manualmente.
const updateCheckFoundation = ({ isDone, key }) => { setTodoList(state => ({ ...state, // <-- shallow copy state object foundation: { ...state.foundation, // <-- shallow copy steps: state.foundation.steps.map(todo => todo.key === key ? { ...todo, isDone } : todo) }, })); }