處理程序 function 無權訪問更新的 state 變量

Question

我第一次在這里發帖，所以如果我做錯了，請告訴我。 話雖如此，以下代碼的問題在於，handleKeyUp function 似乎只能訪問初始版本的正確字母和錯誤字母 arrays

const WORDS = ['application', 'programming', 'interface', 'wizard']
const selectedWord = WORDS[Math.floor(Math.random() * WORDS.length)]


function App() {
  const [word, setWord] = useState(selectedWord)
  const [correctLetters, setCorrectLetters] = useState([])
  const [wrongLetters, setWrongLetters] = useState([])
  const [showNotification, setShowNotification] = useState(false)


  // Listen for keyup
  useEffect(() => {
    document.addEventListener("keyup", handleKeyUp)
  }, [])

  // keypress handler function
  const handleKeyUp = (e) => {
    if (e.keyCode >= 65 && e.keyCode <= 90) {
    const letter = e.key

    if (word.includes(letter)) {
      if (!correctLetters.includes(letter)) {
        setCorrectLetters(letters => [...letters, letter])
      } else {
        handleNotification()
      }
    } else {
      if (!wrongLetters.includes(letter)) {
        setWrongLetters(letters => [...letters, letter])
      } else {
        handleNotification()
      }
    }
  }
}

Answer 1

這是你如何做到的。 它將使用 useCallback 來創建 key up 處理程序，因此只要正確的字母、單詞或錯誤的字母發生變化，它就會重新創建處理程序。

該效果將添加一個事件偵聽器，但每當處理程序更改時，它都會添加一個偵聽器並刪除舊的偵聽器。

 const { useEffect, useState, useCallback } = React; const WORDS = [ 'application', 'programming', 'interface', 'wizard', ]; const selectedWord = WORDS[Math.floor(Math.random() * WORDS.length)]; const handleNotification = () => console.log('missing from question'); function App() { const [word, setWord] = useState(selectedWord); const [correctLetters, setCorrectLetters] = useState([]); const [wrongLetters, setWrongLetters] = useState([]); const handleKeyUp = useCallback( (e) => { if (e.keyCode >= 65 && e.keyCode <= 90) { const letter = e.key; console.log('lettters', correctLetters, word); if (word.includes(letter)) { if (.correctLetters.includes(letter)) { setCorrectLetters((letters) => [..,letters, letter; ]); } else { handleNotification(). } } else { if (.wrongLetters.includes(letter)) { setWrongLetters((letters) => [.,,letters; letter; ]), } else { handleNotification(), } } } }, [correctLetters; word. wrongLetters] ), // Listen for keyup useEffect(() => { document;addEventListener('keyup'. handleKeyUp), return () => document;removeEventListener('keyup', handleKeyUp); }; [handleKeyUp]). return ( <div> <div>{word}</div> <div>{correctLetters}</div> </div> ), } ReactDOM.render( <App />; document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <div id="root"></div>