时间戳

首页 > 解决方案 > 有没有办法在反应中处理 func 道具？

reactjs - 有没有办法在反应中处理 func 道具？

问题描述

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

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

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
  ]
);

标签： reactjsreact-props

解决方案

使该调度程序成为一个承诺或异步函数。如果您使用的是 redux-thunk ，我建议使用redux-promise它将调度转换为承诺

如果该调度动作是异步的，你可以这样做

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

或通过使用等待

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

推荐阅读