使用钩子时等待状态更新

这个 useState hook是异步的,但它没有像这样的回调api setState 做。如果要等待状态更新,则需要 useEffect 挂钩:

import React, { useState, useEffect } from 'react';

export default function Signup() {
  const [terms, setTerms] = useState('');
  const [termsValidation, setTermsValidation] = useState(false);

  useEffect(() => {
    if (!termsValidation) {
      console.log('run something here');
    }
  }, [termsValidation]);

  function handleSubmit(e) {
    e.preventDefault();

    if (!terms) {
      setTermsValidation(true);
    } else {
      setTermsValidation(false);
    }
  }

  return (
    <div>
      <form>
        <input type="checkbox" id="terms" name="terms" checked={terms} />

        <button type="submit" onClick={handleSubmit}>
          Sign up
        </button>
      </form>
    </div>
  );
}

像这样改变状态 setTermsValidation 是异步操作,这意味着它不是立即的,程序不会等待它。它会开火然后忘记。因此,当你打电话 setTermsValidation(true) 程序将继续运行下一个块,而不是等待termValidation变为true。这就是为什么termsValidation仍然具有旧值的原因。

你可以这样做

function handleSubmit(e) {
    e.preventDefault();

    if (!terms) {
      setTermsValidation(true);
    } else {
      setTermsValidation(false);
      // assuming you want to run something when termsvalidation turn to false
      console.log('run something here');
    }
}

或者最好用钩子 useEffect()

useEffect(() => {
    if (!termsValidation) {
      console.log('run something here');
    }
}, [termsValidation]);

但是,要小心,因为useffect也会在初始渲染时运行。