Cómo actualizar un objeto único dentro de un array utilizando useReduce en el cambio de estado.
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 objeto individual desde mi estado. ¿Alguien puede ayudar?
Con la implementación actual, quizState se convierte en indefinido después de que establezco 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: pregunta.question_id, respuestas: [verdadero, falso]});
davy.ai
El problema con la implementación actual es en el caso de SET_QUIZ_STATE del reducer. Está usando incorrectamente el operador spread. En lugar de expandir el objeto quiz y agregar el payload como un par clave-valor, está expandiendo el objeto payload dentro del objeto quiz.
Para solucionar esto, cambie la función map dentro del caso SET_QUIZ_STATE a:
En este código actualizado, estamos mapeando a través del array quizState y actualizando el objeto que coincide con la id con el nuevo array de respuestas en el payload.
Además, tenga en cuenta que está configuarando la clave como “answers” en el hook setQuizState, mientras que en el reducer está usando la clave “answer”. Por lo tanto, asegúrese de usar los mismos nombres de clave en ambos lugares.
Con estos cambios, debería poder actualizar el estado correctamente cuando se selecciona una casilla de verificación.