javascript - setTimeout 中的 setState 返回令人困惑的结果

Question

我试图在提交表单后显示加载程序 1.5 秒，然后停止加载程序并提交表单。 所以我设置了一个状态变量isSubmitting:

  const [isSubmitting, setIsSubmitting] = useState(false);

isSubmitting 默认情况下为 false，提交后，我将其设置为 true，之后我设置了超时以将其设置回来为假。但不知何故，它不会被设置回 false 请参阅注释代码

const onSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(!isSubmitting);
    setTimeout(() => {
      createProfile(formData, history, edit);
      console.log(isSubmitting);// false - why?? its been set to true before the timeoute
      setIsSubmitting(!isSubmitting);
      console.log(isSubmitting);// false - if the previous log was false, this should of been true
    }, 1500);
  };
console.log(isSubmitting) // true - ??? it did not get set back to false

Answer 1

使用useState钩子(Hook)提供的更新器进行状态更新是异步的，并且不会立即反射(reflect)更新的更改。

即

console.log(isSubmitting); // false
setIsSubmitting(!isSubmitting);
console.log(isSubmitting); // false

相反，你应该使用Effect，

const onSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(!isSubmitting);
  };

useEffect(() => {
    // action on update of isSubmitting
  if(isSubmitting) {
    setTimeout(() => {
      createProfile(formData, history, edit);
      setIsSubmitting(!isSubmitting);
    }, 1500);
  }
}, [isSubmitting]);