反应状态与实际状态不同步答案

【问题标题】：React state not in sync with the actual state反应状态与实际状态不同步
【发布时间】：2021-09-05 10:44:31
【问题描述】：

我有一个非常简单的设置。我只有一个受控输入，我想对输入进行控制台记录。

import React, {useState} from 'react'
   
const App = () => {
   const [text, setText] = useState('')
   
   const handleChange = event => {
      event.preventDefault()
      setText(_prev => event.target.value) 
      consoel.log(text) 
   }
   
   return(
      <div>
        <input type="text" value={text} onChange={handleChange} />
      </div>
   )
}

我似乎只得到实际状态之前的那个。例如，如果我在控制台中输入“abc”，我只会看到“ab”，而在输入第四个字符后，我会看到“abc”。为什么我的状态总是落后一个输入？

（尝试以以下方式更改状态 setText(event.target.value) 提供了相同的结果）。

【问题讨论】：

阅读reactjs.org/docs/hooks-state.html 了解如何使用useState 中的setter 方法。它不需要回调。您还拼错了“控制台”
这能回答你的问题吗？ console log the state after using useState doesn't return the current value

标签： reactjs asynchronous react-hooks state

【解决方案1】：

由于它的异步行为，您无法在更新后立即获得价值。要获取该值，您可以使用效果挂钩来检查更改并根据行为进行操作：

useEffect(() => {
  console.log(text) // act upon
}, [text]) // when text changes, it runs

另外，请注意，您只需要这样做：

setText(event.target.value)

【讨论】：