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,            })        }    }在猜到之前，我希望将这封信保留在页面之外，并希望避免直接从脚本中操作 HTML。回购

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

关键是让一切都保持一种状态并将其全部传递给组件。通过添加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>

    

    );