He visto una solución mecanografiada con función de cambio de controlador universal, pero en mi caso funciona mal. Necesito ayuda para entender por qué sucede esto.
Cuando agrego un nuevo producto, se agrega correctamente, pero cuando trato de borrar la entrada manualmente, primero se vuelve a procesar, también cambia el contenido ya agregado.
Algoritmo para ver este error: complete las entradas, agregue el envío y elimine una letra de la entrada del título; verá que afecta el título ya agregado en otro estado, pero solo en la primera representación
Caja de arena: https://codesandbox.io/s/restless-dream-do7bqh?file=/src/App.tsx
El siguiente código de ejemplo puede ser una solución para lograr el objetivo deseado:
En el método handleChange :
setProduct(prev => ({ ...prev, [name]: value }));Explicación
prev del product se toma tal cual... todos los accesorios de prev se distribuyen[name] que es un nuevo accesorio que se agrega con value como el valor correspondiente Supongamos que la variable de name tiene el valor 'title' y el value es 'Testing 123' , entonces el objeto del product se convierte en:
product = { id: previousValueOfId, price: previousValueOfPrice, title: 'Testing 123' } Aquí, se supone que previousValueOfId y previousValueOfPrice son los valores.
Por qué el código de OP no obtuvo el resultado deseado
El código es:
setProduct((prev) => { (prev as any)[name] = value; const newValue = { ...prev }; return newValue; });prev y cambia su [name] prop.prev , puede afectar a los elementos de la interfaz de usuario que se representan mediante product .(NOTA: Todavía soy muy nuevo en ReactJS y si esto es incorrecto, por favor actualice adecuadamente).