React useEffect, что не так?

Question

[stas_mihailov]

В компоненте EditProfile, в useEffect вызываю функцию getUserProfile, а ниже получаю данные и подставляю в форму... если вызывать через setTimeout = 1 сек, то всё срабатывает, но если без setTimeout, то срабатывает ошибка, так как profile я получаю пустой...
Что может быть не так?

P.S. Есть родительский компонент где я сначала получаю данные пользователя, а потом в дочернем получаю данные профиля этого пользователя. В родительском есть метод getUser который так же вызывается в useEffect. Есть подозрение что сначала срабатывает getUserProfile, а уже потом getUser (оба метода посылают асинхронный запрос на сервер). Как пофиксить?

const App = ({ loadUser }) => {
  useEffect(() => {
    loadUser();
  });
  return (
      <Switch>
        <PrivateRoute exact path="/dashboard" component={Dashboard} />
        <PrivateRoute exact path="/create-profile" component={CreateProfile} />
        <PrivateRoute exact path="/edit-profile" component={EditProfile} />
      </Switch>
  );
};

App.propTypes = {
  loadUser: Proptypes.func.isRequired
};

export default connect(null, { loadUser })(App);


const EditProfile = ({
  profile: {loading, profile},
  createProfile,
  getUserProfile,
  history
}) => {
  const [formData, setFormData] = useState({
    key1: "",
    key2: "",
    key3: ""
  });
  useEffect(() => {
    // getUserProfile();
    setTimeout(() => {
        getUserProfile();
      }, 1000);
    setFormData({
      key1: loading || !profile.key1? "" : profile.key1,
      key2: loading || !profile.key2 ? "" : profile.key2,
      key3: loading || !profile.key3 ? "" : profile.key3,
    });
  }, [loading, getCurrentProfile]);


  const {
key1,
key2,
key3
  } = formData;

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = e => {
    e.preventDefault();
    createProfile(formData, history, true);
  };

  return (
    <Fragment>
{* ФОРМА*}
    </Fragment>
  );
};

EditProfile.propTypes = {
  createProfile: Proptypes.func.isRequired,
  getUserProfile: Proptypes.func.isRequired,
  profile: Proptypes.object.isRequired
};

const mapStateToProps = state => ({
  profile: state.profile
});

export default connect(mapStateToProps, { createProfile, getUserProfile})(
  withRouter(EditProfile)
);

Answer 1

[abberati]

Вы показали очень много стандартного кода, который у всех одинаковый и из него не вытащить полезную информацию. Однако вы не показали, ни что такое getUserProfile, ни что такое loadUser, поэтому увы, никаких ответов не дождётесь(