Actualización de un hook sin llamar al método de actualización “set” en React.
¿Qué sucedería si el estado de un hook de React se actualiza directamente en lugar de llamar a la función de actualización “set”?
const MyComponent = () => {
const [formData, setFormData] = useState({
gender: "",
dob: "",
contact: "",
institute: "",
instituteother: "",
occupation: "",
occupationother: "",
streetaddress: "",
city: "",
division: "",
country: "",
email: "",
username: "",
});
const [username, setUserName] = useState("");
const [email, setEmail] = useState("");
}
Este es el hook que he inicializado.
En una función controladora de entrada, estoy actualizando directamente cierto elemento en el objeto de variable de estado de esta manera–
// ... Mis otros códigos
formData.division = "algunaDivisión";
formData.city = "algunaCiudad";
// ... El resto del código
Esto sucede al actualizar mi objeto de estado.
Pero definitivamente entiendo que no es una buena práctica, pero ¿puedo obtener una aclaración sobre cómo rompe la regla de los hooks en react y qué problemas podría plantear en el futuro (si los hubiera)?
N.B: ¡He intentado actualizar el estado de esta manera dentro de la función controladora de entrada pero sin suerte!
const handleInputChange = (e) => {
switch (e.currentTarget.name) {
case "country":
setUpdateDivision(true);
setUpdateCity(true);
setDivisionHook("");
setCityHook("");
setFormData((formData) => ({ ...formData, division: "", city: "" }));
setDivisionOptions([]);
setCityOptions([]);
console.log(e.currentTarget.selected);
break;
case "division":
setUpdateCity(true);
setCityHook("");
setFormData((formData) => ({ ...formData, city: "" }));
setCityOptions([]);
break;
case "institute":
setUpdateInstitute(true);
break;
case "occupation":
setUpdateOccupation(true);
break;
default:
break;
}
setFormData({
...formData,
[e.currentTarget.name]: e.currentTarget.value,
email: email,
user_name: username,
});
};
No actualiza la variable de estado.
Editar: He agregado la función “handleInputChange” completa para mayor claridad.
davy.ai
Actualizar el estado directamente en lugar de llamar a la función actualizadora “set” no funcionará ya que React depende de que el estado sea actualizado a través de la función “set”. React no tendrá conocimiento de los cambios hechos al estado directamente y no volverá a renderizar el componente. Esto puede llevar a comportamientos inesperados y errores en la aplicación. Es importante siempre usar la función “set” para actualizar el estado a fin de asegurarse de que React esté consciente de los cambios y pueda renderizar el componente adecuadamente.