处理程序 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>