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

希望这可以帮助。大警告，未经测试，只是在此处输入作为示例。&nbsp;constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp; super(props);&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;word: this.buildWordModel("word"),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attempts : []&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;buildWordModel(word) {&nbsp; &nbsp; &nbsp; &nbsp; return word.map((char, idx) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return { idx: idx, character: char, found:false};&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;}&nbsp;handleKeyDown = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; const foundLetter = this.state.word.find(letter=> letter.character == event.key);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // you can change condition and return found letter index if you want&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // player to guess all occurances of each letter&nbsp; &nbsp; &nbsp; &nbsp; // for example, you could use findIndex above where found==false&nbsp; &nbsp; &nbsp; &nbsp; // the use the index to mod the array&nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; word: this.state.word.map(letter=> (letter.character=== foundLetter.character? Object.assign({}, letter, { found:true }) : letter)),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attempts: this.state.attempts.concat( { character: event.key, successful: !!foundLetter})&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;}&nbsp;// then it's easy...&nbsp;renderWord() {&nbsp; &nbsp; &nbsp;return this.state.word.map(letter=> <div id={letter.idx} className={letter.found?"found":""}>{letter.character}</div>);&nbsp;}

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. 一旦完成，它就会推送到状态并更新所有内容。然后将该状态推送到组件以呈现新信息。&nbsp;handleKeyDown = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; let match = [...this.state.word];&nbsp; &nbsp; &nbsp; &nbsp; let repeat = false;&nbsp; &nbsp; &nbsp; &nbsp; let letterIndex= [];&nbsp; &nbsp; &nbsp; &nbsp; let correct = false;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // Validate if the key pressed is recurring in allAttempts&nbsp; &nbsp; &nbsp; &nbsp; this.state.allAttempts.map((value, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( this.state.allAttempts[index] === event.key ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return repeat = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; // Validate if key pressed matches the word&nbsp; &nbsp; &nbsp; &nbsp; this.state.word.map((value, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // console.log(this.state.word[0].val)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( this.state.word[index].val === event.key ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; match[index] = {...match[index], found: true}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; letterIndex.push(index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; correct = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; // if repeat is false set allAttempts and repeat. else set repeat to true&nbsp; &nbsp; &nbsp; &nbsp; if( !repeat ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; allAttempts: this.state.allAttempts.concat(event.key),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; word: match,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeat: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; letterIndex: this.state.letterIndex.concat(letterIndex),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; repeat: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }const mapAll = props.word.map((value, index) =>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="card bg-primary letter-card"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={value.id}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="card-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id={index}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="card-title letter-card"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { props.word[index].found ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6>{props.word[index].val}</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ): (<></>)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; );