Question

我第一次在这里发布，所以如果我做错了事，请告诉我。话虽如此，以下代码的问题是handleKeyUp函数似乎只能访问correctLetters和errorLetters数组的初始版本。

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创建密钥处理程序，以便在正确的字母，单词或错误的字母更改时重新创建该处理程序。

该效果将添加一个事件侦听器，但是每当处理程序更改时，它都会添加一个侦听器并删除旧的侦听器。

- random (1,10);
val it = 7 : int
- random (1,10);
val it = 8 : int
- random (1,10);
val it = 7 : int
- random (1,10);
val it = 4 : int
- random (1,10);
val it = 3 : int

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')
);

处理程序函数无权访问更新的状态变量

1 个答案: