目標：輸出與單詞中字母數量相同的空白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?；刭?