Entonces, estoy trabajando en un proyecto, donde un usuario proporcionaría preguntas y, en el momento de la solicitud, el solicitante proporcionaría respuestas a estas preguntas.
Aquí está mi matriz de preguntas del usuario.
const [answers, setAnswers] = useState({}) questions = [ {id: 1, questionType: boolean, required: true, question: 'Are you a UK resident?'}, {id: 2, questionType: text, required: true, question: 'give brief description about you'}, {id: 3, questionType: text, required: false, question: 'How old are you'} ]de esta matriz, he mapeado cada uno de ellos
{questions?.map((q) => ( <Box sx={{ py: 1 }} key={q.id}> <p>{q.question}</p> {q?.questionType === 'boolean' ? ( <Select id='location' required={q.required} onChange={(e) => setAnswers(e.target.value)} > <MenuItem value='Yes'>Yes</MenuItem> <MenuItem value='No'>No</MenuItem> </Select> ) : ( <OutlinedInput required id='name' type='text' onChange={(e) => setAnswers(e.target.value)} /> )}La respuesta de la primera anula la respuesta de la segunda. ¿¿Cómo puedo solucionar esto?? Así que puedo persistir todas las respuestas.
Por ejemplo, podría usar un Mapa que mapee los ID de las preguntas a las respuestas para realizar un seguimiento de las preguntas y las respuestas asociadas.
// map that stores an answer to a question ID // eg // 1 => Yes // 2 => I am a developer // 3 => 123 const [answers, setAnswers] = useState(new Map()); questions = [ { id: 1, questionType: boolean, required: true, question: "Are you a UK resident?", }, { id: 2, questionType: text, required: true, question: "give brief description about you", }, { id: 3, questionType: text, required: false, question: "How old are you" }, ];Luego tenga una función que actualice el Mapa cada vez que se responda una pregunta. Esta función toma el ID de la pregunta y el valor. También tiene que crear un nuevo mapa cada vez, ya que React solo hace una comparación superficial y el estado debe tratarse como inmutable.
function updateAnswer(id, value) { const newMap = new Map(answers); newMap.set(id, value); setAnswers(newMap); }Luego, por último, pero no menos importante, debe llamar a su función de actualización.
{questions?.map((q) => ( <Box sx={{ py: 1 }} key={q.id}> <p>{q.question}</p> {q?.questionType === 'boolean' ? ( <Select id='location' required={q.required} onChange={(e) => updateAnswer(q.id, e.target.value)} > <MenuItem value='Yes'>Yes</MenuItem> <MenuItem value='No'>No</MenuItem> </Select> ) : ( <OutlinedInput required id='name' type='text' onChange={(e) => updateAnswer(q.id, e.target.value)} /> )}