时间戳

首页 > 解决方案 > 等待异步提交表单调度完成，然后再继续下一行

reactjs - 等待异步提交表单调度完成，然后再继续下一行

问题描述

我有一个登录表单，我想通过 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等待调度完成后再继续。

我该如何解决这个问题，并且只有在调度完成后才读取 isUserExists 数据？

如果我将使用 useEffect 来完成，我是否需要创建“isDoneDispatching”道具并仅在该道具更新时导航？

谢谢。

标签： reactjsreact-nativereduxreact-reduxreact-navigation

解决方案

将导航移动到useEffect.

但似乎您没有将您的存储values在 redux 商店中。

因此，您必须将它们存储在组件状态中才能将它们传递给导航逻辑

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

  // ...
};

推荐阅读