求教react hooks useState的问题

image.png
我的页面上有个获取验证码的功能,在获取验证码之前需要验证手机号是否正确,所以我这么写了代码

  // 发送验证码
  const handleSendSms = async time => {
    // 验证手机
    console.info('account1', account);

    // 验证手机号是否正确
    validate('account', values.account);

    console.info('account2', account);
    if (account.error) {
      setSnackbar({ open: true, message: '手机输入错误' });

      return;
    }
    // 后面省略。。。
  }

validate函数如下

  const validate = (name, value) => {
    if (name === 'account') {
      if (!value) {
        setAccount({ ...account, error: true });
        console.info('account setAccount', account);
      } else {
        setAccount({ ...account, error: false, helperText: '' });
      }
    }
    //后面省略
  }

state代码

const valueInit = {
    error: false,
    helperText: '',
  };

  // validate
  const [account, setAccount] = useState(valueInit);
  
  // values
  const [values, setValues] = useState({
    account: '',
  });

按我的预想,我点击了获取验证码之后,会在validate()那return掉,事实是console日志结果在setAccount之后输出了error是false,导致最后没有拦截成功,这是为什么呢?是因为异步的原因吗,这种情况怎么处理呢?

account1 {error: false, helperText: ""}
account setAccount {error: false, helperText: ""}
account2 {error: false, helperText: ""}
已解决 悬赏分:0 - 解决时间 2022-01-04 12:59
反对 0举报 0 收藏 0

回答1

最佳
  • @
    function App() {
      const [state, setState] = useState(1);
      setState(2);
      if(state === 2) {
        console.log("yes!");
      } else {
        console.log("nah..");
      }
      
      return (<></>)
    }

    你试一下结果。 // setState 是异步的

    解决办法:

    让 validate 函数更加纯粹,变成一个没有副作用的纯函数,把验证结果返回给调用者,更新 state 的活不该它来干。这样一来, handleSendSms 里可以验证 validate 的返回值,而不是 account.error。

    支持 0 反对 0 举报
    2022-01-04 08:24