Question

当我完成提交注册表单并获取成功数据时，我想返回登录表单。

有什么方法可以在onSubmitForm中调用func道具吗？

main.js

const [goToRegister, setGoToRegister] = useState(false);

const onClickGoToRegister = useCallback(() => {
  setGoToRegister(prev => !prev);
}, []);
...

<Modal
  title={goToRegister ? "register" : "login"}
  visible={showModal}
  onCancel={onCancel}
  footer={null}
>
  {goToRegister ? (
    <SignUpForm onClickGoToRegister={onClickGoToRegister} />
  ) : (
    <LogInForm onClickGoToRegister={onClickGoToRegister} />
  )}
</Modal>;

如您所见，我将'onClickGoToRegister'函数作为道具传递给SignUpForm。

SignUpForm.js

const onSubmitForm = useCallback(
  e => {
    e.preventDefault();
    dispatch({
      type: SIGN_UP_REQUEST,
      data: {
        name: name,
        email: `${email}@${tail}`,
        password: password,
        phone: `${phoneHead}${phoneBody}${phoneTail}`
      }
    });
    if (signUpErrorReason) {
      return message.error(signUpErrorReason);
    }
  },
  [
    name,
    email,
    tail,
    password,
    passwordCheck,
    phoneHead,
    phoneBody,
    phoneTail,
    signUpErrorReason
  ]
);

Answer 1

使该调度程序进入promise或async函数。如果您使用的是redux-thunk，我建议您使用redux-promise，它将分派转换为Promise

如果该调度动作是异步的，则可以执行

dispatch()
 .then(() => {
    props.onClickGoToRegister()
  })

或通过使用

useCallback(async e => {
  // do stuff
 await dispach({})
 props.onClickGoToRegister()
})

有什么方法可以处理func道具的反应吗？

1 个答案: