Tengo un componente de formulario en una interfaz de usuario de Material <Tab /> que permite a los usuarios actualizar la información de su dirección. La información se obtiene de la API a través redux-thunk y los campos del formulario se llenan con datos del servidor antes de que se produzca la actualización.

El problema es que después de que el usuario complete los campos con nuevos datos y actualice su dirección, los campos del formulario aún muestran el estado anterior y no se actualizan hasta que el usuario vuelve a cargar la página.

Para solucionar el problema, implementé useEffect para enviar la acción de obtener datos de usuario siempre que el estado isUpdated sea verdadero (lo que sucederá después de que se complete la acción updateUserAddress ). Esto, por supuesto, introdujo otro problema que era el renderizado infinito.

Para corregir la llamada de envío infinito, envío una acción para borrar el estado de actualización y lo configuro en falso en la función de limpieza de useEffect . Esto ha resuelto el problema y cada vez que el usuario actualiza su dirección, la interfaz de usuario se actualiza y los nuevos valores completan los campos del formulario:

 // Refresh user after address update useEffect(() => { if (updateState) { dispatch(getUser(userInfo.user_id)); } // Clear update state return () => dispatch(clearUpdateState()); }, [dispatch, updateState, userInfo]);

El único problema es que se llama a la función de limpieza cada vez que el usuario cambia de un lado a otro desde la pestaña Edit Address .

Aunque este enfoque solucionó mi problema, era escéptico al respecto y quería saber si esta es la forma correcta de hacerlo.