Bien entonces es simple
Tengo una serie de respuestas dentro de una serie de preguntas. el usuario tiene la opción de seleccionar más de una respuesta.
Cuando se selecciona una respuesta, el texto debe cambiar a seleccionada y no seleccionada si no está seleccionada.
Estos son los pasos que he probado para actualizar mi estado
setTestInfo((state) => { const allStateQuestions = state.info.questions; const currentQuestion = allStateQuestions.filter( (question) => question.id === questionId )[0]; const allAnswersMap = currentQuestion.answers.map((answer) => answer.id === answerId ? (() => { answer.is_chosen = !answer.is_chosen; return answer; })() : answer ); currentQuestion.answers = allAnswersMap; return { ...state, info: { ...state.info, questions: allStateQuestions, }, }; }); setTestInfo((state) => { const allStateQuestions = state.info.questions; const currentQuestion = allStateQuestions.filter( (question) => question.id === questionId )[0]; const currentAnswer = currentQuestion.answers.find( (answer) => answer.id === parseInt(answerId) ); currentAnswer.is_chosen = !currentAnswer.is_chosen; // i even went to the extend of reassigning it yet it doesn't work currentQuestion.answers.filter((answer) => answer.id === answerId)[0] = currentAnswer; return { ...state, info: { ...state.info, questions: allStateQuestions, }, }; });Bueno, después de usar las lógicas de muestra anteriores, ninguna de ellas parece funcionar. Gracias de antemano.
Estás mutando el estado en ambos casos. Cubriré el primer fragmento.
setTestInfo((state) => { const allStateQuestions = state.info.questions; // <-- reference to state const currentQuestion = allStateQuestions.filter( // <-- reference to state (question) => question.id === questionId )[0]; const allAnswersMap = currentQuestion.answers.map((answer) => answer.id === answerId ? (() => { answer.is_chosen = !answer.is_chosen; // <-- state mutation!! return answer; })() : answer ); currentQuestion.answers = allAnswersMap; // <-- state mutation!! return { ...state, info: { ...state.info, questions: allStateQuestions, // <-- saved reference back into state }, }; }); El objeto currentQuestion.answers del estado state.info.questions se mutó y la referencia de la matriz state.info.questions nunca cambió, por lo que React no "ve" esto como una actualización y no activa una nueva representación.
Aplicar el patrón de actualización inmutable. Debe copiar superficialmente todas las actualizaciones en una nueva matriz y referencias de objetos.
setTestInfo((state) => { return { ...state, info: { ...state.info, // new questions array questions: state.info.questions.map(question => question.id === questionId ? { // new question object ...question, // new answers array answers: question.answers.map(answer => answer.id === answerId ? { // new answer object ...answer, is_chosen: !answer.is_chosen, } : answer ), } : question ), }, }; });