React 钩子状态未在日志中更新

IT技术 reactjs
2021-05-11 06:28:37

如果我写

function Component() {
  const [isLoading, setLoading] = useState(true);
  const request = () => {
    setLoading(true)
    console.log(isLoading)
    setLoading(false)
    console.log(isLoading)
  }
}

两次都将注销“true”。为什么控制台中的状态没有更新？尽管它在 DOM 中运行良好。

this.setState({ ...} 将显示新的状态值

2个回答

通过使用setState或useState钩子在状态中设置新值是一个异步过程。

如果要在更改后记录新值，则必须将其与useEffect钩子结合

useEffect(() => {
  console.log(isLoading)
}, [isLoading]);

Arnaud 的回答是 100% 正确的，但是在玩这些东西时让我感到困惑的是，调用setState两次与尝试console.log在更新后直接调用的效果不同。

这是因为 React 在内部处理状态更新的方式，即使您的日志可能是错误的，您的状态实际上也得到了适当的更新。

其它你可能感兴趣的问题
上一篇在 PLA 上打印 0.1 毫米以下分辨率的打印速度和设置 下一篇有条件地将属性（样式）添加到react元素