Question

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

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) 提供了相同的结果）。

Answer 1

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

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

另外，旁注，你只需要：

setText(event.target.value)

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

1 个答案: