React useState 在一个状态下工作，但在另一个状态下不工作

Question

我目前正在尝试使用 React 制作 wordle 风格的游戏。

在我的主要组件中，我有一个 useEffect 运行s 一次来初始化一些东西以及创建一个“keydown”eventListener。

  useEffect(() => {
    //These two functions getWordList and updateColors don't really matter much for this issue I think.
    const getWordList = async () => {
      let response = await fetch(wordListUrl);

      var wordList = await response.text();

      var wordListArr = wordList.split("\n");

      setWords(wordListArr);

      const randomWord =
        wordListArr[Math.floor(Math.random() * wordListArr.length)];

      setAnswer(randomWord);
    };

    const updateColors = async () => {
      const newColors = {} as any;

      for (let c of alphabet) {
        newColors[c] = "bg-gray-400";
      }

      setColors(newColors);
    };

    //THIS FUNCTION is the one that's probably causing an issue.

    const setupKeys = async () => {
      document.addEventListener("keydown", logKey);

      function logKey(e: any) {
        if (e.code.match(/Key[A-Z]/)) {
          handleInput(e.code[3].toLowerCase());
        }
        if (e.code == "Enter" || e.code == "Backspace") {
          handleInput(e.code);
        }
      }
    };

    getWordList();
    updateColors();
    setupKeys();
  }, []);

然后我将我的 handleInput 函数写在 useEffect 之外但在组件内部，如下所示：

  const handleInput = (keyPress: string) => {
    console.log(keyPress);
    if (keyPress == "Enter") {
      return;
    }

    if (keyPress == "Backspace") {
      return;
    }

    let oldWord = (curWord + keyPress).slice(0, 5);

    setCurWord(oldWord);

    let currentBoard = board;
    currentBoard[curLine] = oldWord;

    while (currentBoard[curLine].length < 5) currentBoard[curLine] += " ";

    setBoard([...currentBoard]);
  };

出于某种原因，当我运行这段代码时，开发板会根据我的按键进行更新，但永远不会存储 curWord 状态。我的意思是，当我 console.log curWord 时，它总是被初始化为空字符串，但电路板得到适当更新。我不确定为什么要更新董事会，但这个词不是。

我试过使用 useCallback，但 none 成功了。

非常感谢您的帮助。

Answer 1

您的事件处理函数已关闭第一个渲染。这意味着处理程序内部的状态始终相同。每次状态更改时，您都应该更新事件处理程序。为此，创建一个新的 useefect，它使用依赖项数组中的状态更改按键事件处理程序。

React useState 在一个状态下工作，但在另一个状态下不工作

React useState is working on one state but not the other

javascript

typescript

reactjs

next.js

use-state