@stas_mihailov

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

В компоненте 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)
);
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 1
@abberati
frontend-разработчик
Вы показали очень много стандартного кода, который у всех одинаковый и из него не вытащить полезную информацию. Однако вы не показали, ни что такое getUserProfile, ни что такое loadUser, поэтому увы, никаких ответов не дождётесь(
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы