Подождите, пока asyn c отправит форму отправки на fini sh, прежде чем перейти к следующей строке - PullRequest
Новая
       153

Подождите, пока asyn c отправит форму отправки на fini sh, прежде чем перейти к следующей строке

0 голосов
/ 10 июля 2020

У меня есть форма входа, в которой я хочу обрабатывать функцию отправки и обновления через redux.

Login.js:

const Login = (props) => {
  const dispatch = useDispatch();
  const isUserExists = useSelector((state) => state.auth.isUserExists);

  const handleSubmitForm = (vals) => {
    dispatch(isUserExistsByPhoneNumber("Login", vals)).then(() =>
      props.navigation.navigate(isUserExists ? "VerifyAuth" : "Signup", {
        vals: vals,
        sentFrom: "Login",
      })
    );
  };

LoginForm.js:

const LoginForm = (props) => {
  const handleFormSubmit = () => {
    props.submitForm(values);
  };

  const [values, handleChange, handleSubmit] = useForm(handleFormSubmit);

  return (
    <View>
      <Input
        name="phoneNumber"
        value={values.phoneNumber || ""}
        onChange={(name, value) => handleChange(name, value)}
        label="Phone Number"
        keyboardType="number-pad"
      />

      <Button
        mode="outlined"
        onPress={handleSubmit}
        loading={props.submitting}
        disabled={props.submitting}>
        Login
      </Button>
    </View>
  );
};

AuthActions.js:

export const isUserExistsByPhoneNumber = (sentFrom, phoneNumber) => {
  return (dispatch) => {
    dispatch({ type: authTypes.GET_IS_USER_EXISTS_REQUEST });
    return authService
      .checkIfUserExists(sentFrom, phoneNumber)
      .then((response) => {
        dispatch({ type: authTypes.GET_IS_USER_EXISTS_SUCCESS });
        dispatch(setIsUserExists(response));
      })
      .catch((errors) => {
        dispatch({ type: authTypes.GET_IS_USER_EXISTS_ERROR, payload: errors });
      });
  };
};

Код не работает, просто потому, что ".then" после отправки на Login.js не ожидает отправки на fini sh, прежде чем продолжить.

Как я могу это исправить и прочитать данные isUserExists только после завершения отправки?

Если я сделаю это с помощью useEffect, мне нужно будет создать опору isDoneDispatching и перемещаться только тогда, когда это обновления опоры?

Спасибо.

1 Ответ

0 голосов
/ 10 июля 2020

Вы были на правильном пути с перемещением навигации к useEffect.

Но похоже, что вы не храните свой values в магазине redux.

Следовательно, вы будете должны сохранять их в состоянии компонента, чтобы передать их в лог навигации c

const Login = (props) => {
  const dispatch = useDispatch();
  const isUserExists = useSelector((state) => state.auth.isUserExists);

  // store values in component state
  const [values, setValues] = useState(null);
  const [allowNavigate, setAllowNavigate] = useState(false);

  const handleSubmitForm = (vals) => {
    // store values in component state since you do not store them in redux state
    setValues(vals);

    dispatch(isUserExistsByPhoneNumber("Login", vals)).then(() => {
      setAllowNavigate(true);
    });
  };

  useEffect(() => {
    if (allowNavigate) {
      props.navigation.navigate(isUserExists ? "VerifyAuth" : "Signup", {
        vals: values,
        sentFrom: "Login",
      });
    }
  }, [allowNavigate, isUserExists, values]); // track values and isUserExists change

  // ...
};
...