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(()&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;console.log(question) },[question])这只会在每次question状态更新后运行。