Estoy generando dinámicamente componentes de formulario de interfaz de usuario de material y quiero actualizar sus valores cuando escribo en el formulario. Sin embargo, la propiedad de valor se asigna a un objeto de valores useState. cuando cambio este objeto y actualizo el estado, el valor en el objeto cambia correctamente pero el componente de la interfaz de usuario del material no lo hace, ya que su valor está vinculado al objeto de valor original. Creo que está relacionado con el hecho de que estoy creando dinámicamente estos componentes con un botón.
La propiedad de valor en el campo de texto es lo que no se actualiza.
Estoy actualizando los valores de estos campos dentro de handleAnswersChange. comprueba si ya existe una respuesta. Si lo hace, lo actualizará. Si no, creará uno nuevo.
interface State { title: string; question: string; answers: Array<Answer>; correctAnswer: number; } interface Answer { answer: string; id: number; } export default function CreateQuestion() { const [answers, setAnswers] = React.useState<Array<JSX.Element>>([]); const [errorAnswer, setErrorAnswer] = React.useState(false); const [values, setValues] = React.useState<State>({ title: "", question: "", answers: [{ answer: "", id: 1 }], correctAnswer: 1, }); useEffect(() => { console.log(values); }, [values]); const handleChange = (prop: any) => (event: React.ChangeEvent<HTMLInputElement>) => { setValues({ ...values, [prop]: event.target.value }); }; const handleAnswersChange = ( prop: any, id: number ) => (event: React.ChangeEvent<HTMLInputElement>) => { console.log(values.answers[0].answer); let answerIndex: number = 0; let doesExist: boolean = false; values.answers.map((answer, index) => { if (answer.id === id) { answerIndex = index; doesExist = true; } }); if (doesExist) { const tempValues = values.answers; tempValues[answerIndex] = { answer: tempValues[answerIndex].answer + event.target.value, id: id, }; setValues({ ...values, [prop]: [...tempValues], }); } else { setValues({ ...values, [prop]: [...values.answers, { answer: event.target.value, id: id }], }); } }; const createAnswer = () => { const array = [...answers]; array.push( <Box sx={{ m: 1 }} key={answers.length}> <FormControl sx={{ width: "60ch" }} variant="outlined" key={answers.length} > <TextField id="outlined-required" key={answers.length} label={"Answer " + (answers.length + 1)} value={values.answers[answers.length - 1].answer} onChange={ handleAnswersChange("answers", values.answers.length); } /> </FormControl> </Box>Está utilizando el índice incorrecto. Lo mapeas, pero también tienes el mismo índice estático. Entonces formik lo pondrá en el lugar equivocado.
handleAnswersChange(event, "answers", values.answers.length); Esto siempre seleccionará el índice incorrecto. Dado que el primer elemento tendrá values.answers.length de 1, pero su índice es 0.
Pruébelo con .map y el índice como este .
Guarde las respuestas en sí mismas y simplemente reprodúzcalas con el mapa.
Tampoco necesitas tantas llaves. Solo para el hijo directo del mapa.
Actualización: acabo de ver que ya está guardando las respuestas en los valores también, por lo que simplemente puede asignar values.answers . respuestas y descartar la matriz de respuestas.