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>