React hooks 状态没有在日志中更新答案

【问题标题】：React hooks states aren't updating in logReact hooks 状态没有在日志中更新
【发布时间】：2019-04-05 09:46:03
【问题描述】：

如果我写

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

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

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

【问题讨论】：

您无需等待setLoading 完成。您的日志语句可能在 setLoading 完成更新状态之前完成，
那是错误的，但无论如何，这不是我想要的。我更新了问题
isLoading 不会被setLoading 改变。它的值只会在下一次渲染中更新。 setLoading 也是异步的。

标签： reactjs

【解决方案1】：

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

如果您想在新值更改后记录它，则必须将其与useEffect 挂钩

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

【讨论】：

嗯，工作正常，是的。但是有一个很大的不同，因为您不必调用 componentdidupdate 来记录更改
我从未说过你必须调用componentDidUpdate :) 默认情况下，每次渲染组件时都会调用useEffect 挂钩。通过像我在这里所做的那样传递第二个参数，您可以指定您只想在isLoading 的值发生变化时执行它。所以确实，useEffect 可以在功能组件中替换您之前在类组件中的 componentDidUpdate 中所做的事情。

【解决方案2】：

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

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

【讨论】：