React - 仅在状态更改后执行某些操作（挂钩）

Question

在我的应用程序中，我通过 修改状态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)，这是正确的做法吗？我觉得我应该使用状态作为唯一的事实来源。

Answer 1

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

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

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