如何使用捕获最后一个输入字母

Question

我正在学习，我想要构建一个类型的竞赛游戏:一个小游戏来跟踪你能多快地键入一个文本片段。

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

但是当我开始游戏并输入正确的单词时，它并不表示我输入了相同的单词。

打开控制台，输入任何单词，我发现react没有捕捉到我输入的最后一个字母，例如，我输入了abc，控制台只显示了ab。

那么，如何使用使用react 来完成游戏呢？

这是我的全部代码：

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>
  )
}

Answer 1

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

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