如何使用 React Hooks 捕获最后一个输入字母答案

【问题标题】：How to use React Hooks to capture the last input letter如何使用 React Hooks 捕获最后一个输入字母
【发布时间】：2020-04-07 14:24:20
【问题描述】：

我正在学习 React Hooks，我想构建一个类型竞赛游戏：一个小游戏，用于跟踪你可以多快地输入一个 sn-p 文本。

逻辑很简单：当用户启动游戏时，设置start time，当输入的value等于选择的snippet时，显示endTime。

但是当我开始游戏并输入正确的单词时，并没有显示我输入了相同的单词。

打开控制台，输入任意字，发现react没有捕捉到我输入的最后一个字母，比如我输入abc，控制台只显示ab .

那么我该如何使用 react hooks 来完成游戏呢？

这是我的全部代码：

const App = () => {
  const SNIPPETS = [
    'Bears, beets, battlestar galactica',
    "What's Forrest Gump's password? 1Forrest1",
    'Where do programmers like to hangout? The Foo Bar'
  ]

  const INITIAL_GAME_STATE = { victory: false, startTime: null, endTime: null }

  const [snippet, setSnippet] = useState('')
  const [gameState, setGameState] = useState(INITIAL_GAME_STATE)
  const [userText, setUserText] = useState('')

  useEffect(() => {
    console.log('change')
    if (gameState.victory) {
      document.title = gameState.victory ? 'Victory!' : 'Playing...'
    }
  }, [gameState.victory])

  const updateUserText = e => {
    setUserText(e.target.value)
    console.log(snippet)
    console.log(userText)
    if (userText === snippet) {
      console.log('same')
      setGameState({
        ...gameState,
        victory: true,
        endTime: new Date().getTime() - gameState.startTime
      })
    }
  }

  const chooseSnippet = snippetIndex => () => {
    setSnippet(SNIPPETS[snippetIndex])
    setGameState({
      ...gameState,
      startTime: new Date().getTime()
    })
  } 

  return (
    <div className="game-wrapper">
      <h2>Type Race</h2>
      { snippet && (
        <>
          <h4>{ snippet }</h4>
          <input type="textarea" value={ userText } onChange={ updateUserText } />
          <br />
        </>
      ) }
      <br/>
      <button onClick={ chooseSnippet(0) }>Start a new race!</button>
      <br/>
      { gameState.victory && (
        <h4>`Done! <span>????</span>Time: ${ gameState.endTime }ms`</h4>
      ) }
      <br/>
      {
        SNIPPETS.map((SNIPPET, index) => (
          <button onClick={ chooseSnippet(index) } key={ index }>
            { SNIPPET.substring(0, 10) }...
          </button>
        ))
      }
    </div>
  )
}

【问题讨论】：

标签： javascript html reactjs react-hooks

【解决方案1】：

因为 React 的 setState 是异步的，所以你的 userText 值在你调用 setUserText 之后不会更新。要获取更新的userText，请等待组件的下一次渲染。

useEffect(() => {
  if (userText === snippet) {
    // do something ...    
  }
}, [userText]);

欲了解更多信息：useState set method not reflecting change immediately

【讨论】：

【解决方案2】：

正如 Trí Phan 回答的那样，setState 在钩子中也是异步的。所以我修复了它：

useEffect(() => {
    if (userText === snippet && userText) {
      setGameState({
        ...gameState,
        victory: true,
        endTime: new Date().getTime() - gameState.startTime
      })
    }
  }, [userText])

【讨论】：