UseState仅在第二次单击时显示

问题描述

我在单击表单提交按钮时使用React useState钩子更新状态，该状态直到第二次单击才更新。相信我需要使用useEffect，但不确定如何通过onClick实施。

(split '(a b a c) 0)
=> '(() (a b a c))
(split '(a b a c) 2)
=> '((a b) (a c))

解决方法

如评论中所述； useState是一个异步函数，因此不能保证您在再次获取新值时会得到新值。这是出于性能考虑，允许批量处理多个状态更改。

在同一方法中继续使用新值的最简单方法是将其保存到变量中，如下所示：

const [clicked,setClicked] = useState(false);

function onclick(e) {
  setClicked(true);
  if (clicked) { //this goes wrong as clicked likely isn't updated yet
    //do something
  }
}

const [clicked,setClicked] = useState(false);

function onclick(e) {
  const newClicked = true;
  setClicked(newClicked);
  if (newClicked) { //using the variable garantuees you'll get the value you want
    //do something
  }
}

,

我实现了useEffect来设置hasError状态

useEffect(() => {
    const hasErrors = Object.keys(fieldName).filter(
      (key) => fieldName[key].error
    );
    if (!hasErrors.length) {
      setFormHasError(() => true);
    }
  },[fieldName]);

然后我可以在代码中使用以下内容

if (formHasError) {
      return;
    }