Tengo un componente de casilla de verificación y cuando se selecciona un valor para una casilla de verificación, quiero actualizar mi estado con valores verdaderos y falsos. En total tengo 5 estados diferentes. No puedo actualizar el único objeto de mi estado. ¿Alguien puede ayudar?
Con la implementación actual, quizState se vuelve indefinido después de establecer el valor
Mi reductor se ve así:
quizState: [ {id:0, question_id: '', answer: [] }, {id:1, question_id: '', answer: [] }, {id:2, question_id: '', answer: [] }, {id:3, question_id: '', answer: [] }, {id:4, question_id: '', answer: [] }, ], export const appReducer = (state = appState, action) => { const { type, payload } = action; switch (type) { case SET_QUIZ_STATE: return state.quizState.map((quiz) => quiz.id === payload.id ? ({...quiz, payload}) : quiz) default: return state; }};Y tengo un gancho:
const setQuizState = useCallback( (quizState) => dispatch({ type: SET_QUIZ_STATE, payload: quizState }), [dispatch] );En el componente, en el evento de cambio:
setQuizState({ id: 0, question_id: question.question_id, answers: [true, false] });Está devolviendo solo el subcampo quizState donde se necesita todo el state . Cambie su reductor como a continuación:
export const appReducer = (state = appState, action) => { const { type, payload } = action; switch (type) { case SET_QUIZ_STATE: return { ...state, quizState: state.quizState.map(prevState => { if(prevState.id !== payload.id) return prevState; return { ...prevState, ...payload } }) }; default: return state; } }; Y esta respuesta asume que el objeto de payload es compatible para ser un elemento en la matriz quizState . Creo que tiene un error tipográfico en su evento onChange donde está poniendo answers , no answer para su carga útil.