Reactjs 使用挂钩时等待状态更新

如何使用钩子等待状态更新。当我提交表单时，我需要在运行其他代码之前检查

termsValidation

是否为false。如果州政府刚刚改变，它就不会意识到这一点

import React, { useState } from 'react';

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

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

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

    if (!termsValidation) {
      console.log('run something here');
    }
  }

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

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

import React，{useState}来自“React”；
导出默认函数注册（）{
const[terms，setTerms]=useState（“”）；
const[termsValidation，setTermsValidation]=使用状态（false）；
函数handleSubmit（e）{
e、 预防默认值（）；
如果（！条款）{
setTermsValidation（真）；
}否则{
setTermsValidation（假）；
}
如果（！termsValidation）{
log（'runsomethine here'）；
}
}
返回(
注册
);
}

更改状态，如

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也会在初始渲染时运行。

useState钩子是异步的，但它没有像

setState

那样的回调api。如果要等待状态更新，则需要一个

useffect

hook：

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

import React，{useState，useffect}来自“React”；
导出默认函数注册（）{
const[terms，setTerms]=useState（“”）；
const[termsValidation，setTermsValidation]=使用状态（false）；
useffect（（）=>{
如果（！termsValidation）{
log（'runsomethine here'）；
}
}，[术语验证]；
函数handleSubmit（e）{
e、 预防默认值（）；
如果（！条款）{
setTermsValidation（真）；
}否则{
setTermsValidation（假）；
}
}
返回(
注册
);
}

你可以看到我的答案，只是小心循环。它可以超过更新深度并无限渲染

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