React猜词游戏错误字母过滤功能异常问题求助

我用React开发简易Hangman（刽子手）游戏，要实现过滤单词中错误猜测字母的功能。Keyboard和HangmanDrawing组件运行正常，控制台能记录点击的字母，但错误字母过滤逻辑未正常工作，控制台日志显示过滤结果不符合预期。

相关代码 #

import { useState, useEffect } from "react";
import axios from "axios";
import HangmanDrawing from "./components/HangmanDrawing";
import Keyboard from "./components/Keyboard";
import WordToGuess from "./components/WordToGuess";

const options = {

};

export default function App() {
    const [word, setWord] = useState<string | null>(null);
    const [guessedLetters, setGuessedLetters] = useState<string[]>([]);
    const incorrectLetters: string[] = guessedLetters.filter(
        (letter) => !word?.includes(letter)
    );

    useEffect(() => {
        const fetchWord = async () => {
            try {
                const response = await axios.request(options);
                setWord(response.data);
            } catch (error) {
                console.error(error);
            }
        };

        fetchWord();
    }, []);

    useEffect(() => {
        console.log(word);
        console.log(guessedLetters);
        console.log(incorrectLetters);
    }, [guessedLetters]);

    return (
        <div>
            <HangmanDrawing incorrect={incorrectLetters.length} />
            {word && (
                <WordToGuess
                    word={word}
                    guessedLetters={guessedLetters}
                />
            )}
            <Keyboard
                guessedLetters={guessedLetters}
                setGuessedLetters={setGuessedLetters}
            />
        </div>
    );
}

控制台日志 #

hippodrome
(11) ['G', 'H', 'D', 'J', 'L', 'K', 'I', 'E', 'F', 'C', 'O'] // 错误字母数组
(11) ['G', 'H', 'D', 'J', 'L', 'K', 'I', 'E', 'F', 'C', 'O'] // 错误字母数组
[] // 正确字母数组

问题原因及解决方案 #

问题1：大小写不匹配 #

从日志能看到，猜测的字母是大写（比如'H'），但目标单词是小写的hippodrome，word.includes('H')会返回false，导致原本正确的字母被判定为错误。

问题2：错误字母计算未响应word变化 #

当前incorrectLetters直接在组件顶层声明，只有guessedLetters变化时才会重新计算，但异步获取的word更新后，它不会跟着重新计算，导致过滤逻辑失效。

修复后的代码 #

import { useState, useEffect, useMemo } from "react";
import axios from "axios";
import HangmanDrawing from "./components/HangmanDrawing";
import Keyboard from "./components/Keyboard";
import WordToGuess from "./components/WordToGuess";

const options = {
  // 补充你的请求配置
};

export default function App() {
    const [word, setWord] = useState<string | null>(null);
    const [guessedLetters, setGuessedLetters] = useState<string[]>([]);

    // 用useMemo缓存计算结果，依赖word和guessedLetters
    const incorrectLetters = useMemo(() => {
        if (!word) return [];
        const lowerCaseWord = word.toLowerCase();
        // 统一转小写后判断匹配
        return guessedLetters.filter(
            letter => !lowerCaseWord.includes(letter.toLowerCase())
        );
    }, [word, guessedLetters]);

    useEffect(() => {
        const fetchWord = async () => {
            try {
                const response = await axios.request(options);
                setWord(response.data);
            } catch (error) {
                console.error(error);
            }
        };

        fetchWord();
    }, []);

    useEffect(() => {
        console.log('目标单词:', word);
        console.log('已猜字母:', guessedLetters);
        console.log('错误字母:', incorrectLetters);
    }, [word, guessedLetters, incorrectLetters]);

    return (
        <div>
            <HangmanDrawing incorrect={incorrectLetters.length} />
            {word && (
                <WordToGuess
                    word={word}
                    guessedLetters={guessedLetters}
                />
            )}
            <Keyboard
                guessedLetters={guessedLetters}
                setGuessedLetters={setGuessedLetters}
            />
        </div>
    );
}

修复说明 #

1. 统一大小写：将目标单词和猜测字母都转为小写后再判断匹配，避免大小写差异导致的误判。
2. 使用useMemo：把错误字母的计算逻辑包裹在useMemo中，依赖数组包含word和guessedLetters，确保这两个变量任意一个变化时，都会重新计算错误字母数组。
3. 更新日志依赖：调整日志的useEffect依赖项，确保所有相关变量变化时都能打印正确的结果。

内容的提问来源于stack exchange，提问作者k00