时间戳

首页 > 解决方案 > React onSubmit 等待函数内部的异步 IIFE 使用钩子更新状态

javascript - React onSubmit 等待函数内部的异步 IIFE 使用钩子更新状态

问题描述

有没有办法等待这个状态（customerId => setCustomerId）更新？

当用户注册时，他/她被重定向并且表单被卸载。

我尝试使用 IIFE，所以它在提交后立即运行，但没有运气，useEffect 也不会工作，因为我无法将 onSubmit 函数包装在 useEffect 范围内，至少我认为它不会工作。

有人可以告诉我这一点吗，在注册时更新 firebase 中的用户文档（这就是 UserDataProvider() 所做的）以防止将来出现并发症至关重要。

const onSubmit = (formData: FormData) => {
    document.body.style.cursor = 'wait';
    (async function () {
      const customer = await axios.post('/api/create_customer', {
        email: 'testemail@test.com',
        name: `Dario Kolic`,
      });
      setCustomerId(customer.data);
    })();
    console.log(customerId);
    return auth
      .createUserWithEmailAndPassword(formData.email, formData.password)
      .then(() => {
        return new UserDataProvider().set({
          customerId: customerId,
        });
      })
      .then(() => {
        document.body.style.cursor = 'default';
        // window.location.href = '/terms_of_service';
      });
  };

标签： javascriptreactjstypescriptstate

解决方案

问题

第一个 IIFE 只有异步调用，为什么第二个返回立即执行而不等待客户 ID 更新。这意味着在 customerid 更新之前执行的第二个函数

最好使用默认then callback函数而不是等待。为什么在onsubmit事件中使用 return 语句。我认为这应该没有效果。

const onSubmit = (formData: FormData) => {
  document.body.style.cursor = 'wait';
  axios.post('/api/create_customer', {
    email: 'testemail@test.com',
    name: `Dario Kolic`,
  }).then((customer) => {
    setCustomerId(customer.data);
    auth
      .createUserWithEmailAndPassword(formData.email, formData.password)
      .then(() => {
        return new UserDataProvider().set({
          customerId: customer.data,
        });
      })
      .then(() => {
        document.body.style.cursor = 'default';
        // window.location.href = '/terms_of_service';
      });
  })
};

推荐阅读