Блог

Я создал форму для отправки пользователем и последующего обновления. Пользователь переходит к форме со своей панели мониторинга, и форма должна загрузить значения, хранящиеся в базе данных. Проблема, с которой я сталкиваюсь, заключается в том, что, как только пользователь отправляет обновление в форму, он затем перемещает их обратно на свою панель мониторинга, а затем, если они немедленно перейдут по ссылке, чтобы вернуться к форме, чтобы обновить ее снова, она не загружает то, что они только что обновили (она загрузит обновление, если пользователь обновит страницу). Я бы хотел, чтобы он обновлялся автоматически, без необходимости обновления страницы пользователем. Есть какие-нибудь мысли?

Вот родительский компонент формы, в который загружаются данные пользователя (параметр пользователя поступает из основного компонента приложения).:

 const HealthHistory = ({ user }) =gt; {  const dispatch = useDispatch();   useEffect(() =gt; {  if (user) {  const userId = user.result._id;  dispatch(getUser(userId));  }  }, [dispatch, user]);   const userState = useSelector((state) =gt; state?.usersReducer?.user?.data);   return !userState ? (  lt;divgt;Loading...lt;/divgt;  ) : (  lt;div className='container'gt;  lt;HHForm user={user} userState={userState} /gt;  lt;/divgt;  ); };  

И вот как загружается компонент формы (я опустил много полей, просто чтобы код был кратким в этом посте):

 const HHForm = ({ user, userState }) =gt; {  const dispatch = useDispatch();  const history = useHistory();   const [occupation, setOccupation] = useState('');  const [phoneNumber, setPhoneNumber] = useState('');   const formData = {  occupation,  phoneNumber,  };   useEffect(() =gt; {  setOccupation(  userState?.healthHistory[0]?.occupation  ? userState?.healthHistory[0]?.occupation  : ''  );  setPhoneNumber(  userState?.healthHistory[0]?.phoneNumber  ? userState?.healthHistory[0]?.phoneNumber  : ''  );  }, []);   const handleSubmit = (e) =gt; {  e.preventDefault();  if (user) {  dispatch(submitHH(formData));  clear();  history.push('/dashboard');  } else {  clear();  history.push('/dashboard');  }  };   const clear = () =gt; {  setOccupation('');  setPhoneNumber('');  };   return (  lt;form className='ui form' onSubmit={handleSubmit}gt;  lt;divgt;  lt;labelgt;Occupationlt;/labelgt;  lt;input  name='occupation'  type='text'  value={occupation}  onChange={(e) =gt; setOccupation(e.target.value)}  /gt;  lt;/divgt;  lt;divgt;  lt;labelgt;Phone numberlt;/labelgt;  lt;input  name='phoneNumber'  type='text'  value={phoneNumber}  onChange={(e) =gt; setPhoneNumber(e.target.value)}  /gt;  lt;/divgt;  lt;button type='submit' className='ui button'gt;  Submit  lt;/buttongt;  lt;/formgt;  ); };