React - 仅在状态更改（挂钩）后才做某事[重复]答案

【问题标题】：React - Do something only after state change (hooks) [duplicate]React - 仅在状态更改（挂钩）后才做某事[重复]
【发布时间】：2021-03-13 13:27:13
【问题描述】：

在我的整个应用程序中，我通过useState() 修改状态，例如：

const [question, setQuestion] = useState('')

const updateQuestionHandler = () => {
  let honestQuestion = 'is this a race condition?'
  setQuestion(honestQuestion)
  console.log(question)  // Returns => '' or the previous state, why isn't the updated state returned instead?
}

return (
  <div> 
    <p> { question } </p> // This is generally updated correctly, after the button click below
    <button onClick={() => updateQuestionHandler()}> Click to update question </button>
  </div> 
)

上面发生的事情是，一旦我用setQuestion(variable) 更新状态，状态就会更新（最终）。设置后如何确保状态已更新且可安全参考？

你可以看到我在哪里尝试console.log()更新的状态，设置它之后，之前或旧的状态被返回。我可以改为 console.log(honestQuestion) ，这是正确的做法吗？我觉得我应该使用状态作为唯一的事实来源。

【问题讨论】：

setState 是异步的。请参阅发布的答案。
简单地说，更新状态是异步的。链接的副本更详细地说明了原因。但要回答这个问题，您当前在哪里使用console.log，如果这是您想在控制台上看到的信息并且是您想看到它的时间，您确实会记录honestQuestion。
附加的“重复”使用基于this.setState({}) 的类，它允许回调，这将使我能够完成我在原始问题中尝试做的事情。 useState() 挂钩不支持回调。您提到更新状态是异步的，这很有价值，我很欣赏 - 但链接的帖子没有回答“如何”在使用钩子更改后安全使用更新状态的问题

标签： javascript reactjs

【解决方案1】：

要在更新钩子状态后执行某些操作，您需要使用 useEffect 并将状态传递给依赖项数组

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

这只会在每次question 状态更新后运行。

【讨论】：

非常感谢。我看起来需要在更改后更改引用状态的方式。意思是，与其在更新它的函数中直接调用console.log(updatedState)，不如创建一个单独的函数，该函数仅在状态更改后由useEffect() 运行。从那里，我可以“安全地”依赖 question 或任何 updatedState 来更新
@bruh 你是对的。