在 React 应用程序中过滤不正确的字母无法正常工作

Question

我正在使用 React 编写一个简单的 Hangman 游戏，并尝试实现过滤掉单词中猜错的字母的功能。键盘（按钮）和 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'] // incorrect array
(11) ['G', 'H', 'D', 'J', 'L', 'K', 'I', 'E', 'F', 'C', 'O'] // incorrect array
[] // correct array

其他组件的代码：https://pastebin.com/cQx1X99R

Answer 1

尝试将

toUpperCase

添加到

word

上：

const incorrectLetters: string[] = guessedLetters.filter(
        (letter) => !word?.toUpperCase().includes(letter)
    );

因为您的单词全部小写，并且

includes

区分大小写。 另外，错误字母的正确数组值应该是“[“G”，“J”，“L”，“K”，“F”，“C”]'，因为这些是猜测的不会出现在单词中的字母？