Las variables de estado globales o locales no devuelven una promesa osea que no se les puede anteponer \u00abawait\u00bb porque nunca devolver\u00e1 una promesa.<\/p>\n\n\n\n
En este c\u00f3digo la funci\u00f3n eliminarPersona no esperar\u00e1 por el cambio de estado la variable de estado global \u00abstate\u00bb: <\/p>\n\n\n\n
import { useAppState } from \"..\/state.jsx\";
...
const [state, setState] = useAppState();
....
const eliminarPersona = async (data) => {
await setState({...state, ...persona, agregando_persona });
<\/code><\/pre>\n\n\n\nY en este otro c\u00f3digo la funci\u00f3n modificarPersona tampoco esperar\u00e1 por el cambio de estado de la variable de estado local \u00absetErrorRut\u00bb:<\/p>\n\n\n\n
const [errorRut, setErrorRut] = useState('');
....
const modificarPersona = async (data) => {
await setErrorRut(\"Mensaje de error\");<\/code><\/pre>\n\n\n\nLa soluci\u00f3n es usar un useEffect() como en este ejemplo: <\/p>\n\n\n\n
import React, { useState, useEffect } from 'react';
import { useAppState } from \"..\/state.jsx\"; \/\/ Asumimos que este es tu hook de contexto
const MiComponente = () => {
\/\/ 1. Obtenemos el estado y la funci\u00f3n para actualizarlo desde el contexto.
const [state, setState] = useAppState();
\/\/ 2. Aqu\u00ed est\u00e1 la magia: El hook useEffect.
\/\/ Este bloque de c\u00f3digo se ejecutar\u00e1 DESPU\u00c9S de que el componente se haya vuelto a renderizar
\/\/ Y SOLO SI el valor de `state.prueba_cambio` ha cambiado desde el renderizado anterior.
useEffect(() => {
\/\/ Es una buena pr\u00e1ctica comprobar el valor actual del estado.
\/\/ As\u00ed nos aseguramos de que los \"Otros comandos\" se ejecutan solo cuando `prueba_cambio` es `false`.
if (state.prueba_cambio === false) {
console.log(\"El estado ahora s\u00ed se ha actualizado a 'false'.\");
\/\/ 3. Aqu\u00ed es donde colocas los \"Otros comandos\".
\/\/ Este c\u00f3digo tiene la garant\u00eda de que se ejecuta con el valor de `state` ya actualizado.
\/\/ OtrosComandos();
\/\/ ...
}
}, [state.prueba_cambio]); \/\/ <-- El array de dependencias es la clave. Le dice a React: \"Vigila este valor\".
\/\/ 4. La funci\u00f3n que inicia todo.
\/\/ Su \u00fanica responsabilidad es solicitar el cambio de estado.
const funcionLlamadora = () => {
console.log(\"Solicitando el cambio de estado...\");
cambiarEstadoContextual();
\/\/ La funci\u00f3n termina aqu\u00ed. No espera nada.
};
\/\/ 5. La funci\u00f3n que actualiza el estado.
const cambiarEstadoContextual = () => {
\/\/ Usamos la forma funcional de setState para evitar problemas con estados obsoletos (stale state).
\/\/ Es una pr\u00e1ctica recomendada, especialmente con el contexto.
setState(prevState => ({ ...prevState, prueba_cambio: false }));
\/\/ Cambiamos el estado como se muestra en la l\u00ednea anterior: Envuelto dentro de una funci\u00f3n
};
return (
<div>
<p>Valor actual de prueba_cambio: {String(state.prueba_cambio)}<\/p>
<button onClick={funcionLlamadora}>
Cambiar Estado y Ejecutar Comandos
<\/button>
<\/div>
);
};
export default MiComponente;
<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Las variables de estado globales o locales no devuelven una promesa osea que no se les puede anteponer \u00abawait\u00bb porque nunca devolver\u00e1 una promesa. En este c\u00f3digo la funci\u00f3n eliminarPersona no esperar\u00e1 por el cambio de estado la variable de estado global \u00abstate\u00bb: Y en este otro c\u00f3digo la funci\u00f3n modificarPersona tampoco esperar\u00e1 por el […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"material-hide-sections":[],"footnotes":""},"categories":[66],"tags":[67],"class_list":["post-2444","post","type-post","status-publish","format-standard","hentry","category-react-js","tag-reactjs"],"_links":{"self":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/2444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/comments?post=2444"}],"version-history":[{"count":1,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/2444\/revisions"}],"predecessor-version":[{"id":2445,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/posts\/2444\/revisions\/2445"}],"wp:attachment":[{"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/media?parent=2444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/categories?post=2444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/saemas.com\/sitio_web\/wp-json\/wp\/v2\/tags?post=2444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}