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

Question

我正在学习 React Hooks，我想构建一个打字比赛游戏:一个小游戏来跟踪你可以多快地输入一段文本。

逻辑很简单:当用户开始游戏时，设置开始时间，当输入的值等于所选的snippet时>，显示结束时间。

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

打开控制台，输入任意单词，发现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>
  )
}

Answer 1

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

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

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