React.js 中 Hangman 游戏的对象比较

Question

目标：输出与单词中的字母相同数量的空白 div。比较两个对象数组，并在适当的位置显示常见的字母。当另一个字母添加到对象数组中时，保留单词显示中的所有先前字母。

问题：比较两个对象并只显示常见的字母。

word: [
{id: 0, val: "w"}
{id: 1, val: "o"}
{id: 2, val: "r"}
{id: 3, val: "d"}
{id: 4, val: "d"}
]

goodAttempts: [
{id: 3, val: "d"}
{id: 4, val: "d"}
]

以下是用于捕获按键并将其分配给状态的代码。 goodAttempts 和 word 的状态（在其他地方捕获并分配）作为 props 传递给组件。

 handleKeyDown = (event) => {
        let match = [];
        let repeat = false;
        let letterIndex= [];
        let correct = false;
        
        // Validate if the key pressed is recurring in allAttempts
        this.state.allAttempts.map((value, index) => {
            if( this.state.allAttempts[index] === event.key ) {
                return repeat = true;
            }
        })

        // Validate if key pressed matches the word
        this.state.word.map((value, index) => {   
            if( this.state.word[index].val === event.key ) {
                letterIndex.push(index);
                match.push(this.state.word[index]);
                correct = true;
                return
            } 
        })

        // if repeat is false set allAttempts and repeat. else set repeat to true
        if( !repeat ) {
            this.setState({
                allAttempts: this.state.allAttempts.concat(event.key),
                goodAttempts: this.state.goodAttempts.concat(match),
                repeat: false,
                letterIndex: this.state.letterIndex.concat(letterIndex),
            });
        } else {
            this.setState({
                repeat: true,
            })
        }
    }

下面是我想要完成的 sudo 代码

    const mapAll = props.word.map((value, index) => 
    
        <div 
            className="card bg-primary letter-card"
            key={value.id}
        >
            <div className="card-body">
                <h5
                    id={index} 
                    className="card-title letter-card"
                >
                    {where props.goodAttempts === props.word (
                        {props.goodAttempts} // (the correct letter will display in order)
                    ) : (
                        BLANK // (no text will display)
                    )}
                </h5>
            </div>
        </div>
    
    );

我希望将字母留在页面上，直到它被猜到为止，并希望避免直接从脚本中操作 HTML。
Repo

Answer 1

希望这会有所帮助。大警告，未经测试，只是在这里输入作为示例。

 constructor(props) {
        super(props);
        this.state = {
           word: this.buildWordModel("word"),
           attempts : []
        }

 buildWordModel(word) {
        return word.map((char, idx) => {
           return { idx: idx, character: char, found:false};
        });
 }

 handleKeyDown = (event) => {

        const foundLetter = this.state.word.find(letter=> letter.character == event.key);
        
        // you can change condition and return found letter index if you want 
        // player to guess all occurances of each letter
        // for example, you could use findIndex above where found==false
        // the use the index to mod the array

        this.setState({
            word: this.state.word.map(letter=> (letter.character=== foundLetter.character? Object.assign({}, letter, { found:true }) : letter)),
            attempts: this.state.attempts.concat( { character: event.key, successful: !!foundLetter})
        });            
 }

 // then it's easy...

 renderWord() {
     return this.state.word.map(letter=> <div id={letter.idx} className={letter.found?"found":""}>{letter.character}</div>);
 }






        

      

Answer 2

感谢 sambomartin 在他的评论中提供修复灵感以简化它！

关键是将所有内容保持在一种状态并将其全部传递给组件。通过将found: bool 添加到对象中，组件很容易在条件语句中使用。最终的对象看起来像：

this.state.word: [
0: {found: false, val: "w", id: 0}
1: {found: false, val: "o", id: 1}
2: {found: false, val: "r", id: 2}
3: {found: true, val: "d", id: 3}
4: {found: true, val: "d", id: 4
]

在按键时，我验证键是否与对象的val 匹配并分配found: true。完成后，它会推送到状态并更新所有内容。然后将该状态推送到组件以呈现新信息。

 handleKeyDown = (event) => {
        let match = [...this.state.word];
        let repeat = false;
        let letterIndex= [];
        let correct = false;
        
        // Validate if the key pressed is recurring in allAttempts
        this.state.allAttempts.map((value, index) => {

            if( this.state.allAttempts[index] === event.key ) {
                return repeat = true;
            }

        })

        // Validate if key pressed matches the word
        this.state.word.map((value, index) => {

            console.log(value)

            // console.log(this.state.word[0].val)
            
            if( this.state.word[index].val === event.key ) {

                match[index] = {...match[index], found: true}                
                letterIndex.push(index);
                correct = true;

            }           
        })

        // if repeat is false set allAttempts and repeat. else set repeat to true
        if( !repeat ) {

            this.setState({
                allAttempts: this.state.allAttempts.concat(event.key),
                word: match,
                repeat: false,
                letterIndex: this.state.letterIndex.concat(letterIndex),
            });
            
        } else {

            this.setState({
                repeat: true,
            })

        }
    }

const mapAll = props.word.map((value, index) =>
    
        <div 
            className="card bg-primary letter-card"
            key={value.id}
        >
            <div className="card-body">
                <h5
                    id={index} 
                    className="card-title letter-card"
                >
                    { props.word[index].found ? (
                        
                        <h6>{props.word[index].val}</h6>
                    ): (<></>)}
          
                    
                </h5>
            </div>
        </div>
    
    );