为什么未在此组件中设置我的状态

Question

利用我的React技能，制作纸牌比对游戏。有16张卡，您一次翻2张。如果匹配，他们会保持翻转并显示面孔，否则，他们会翻转过来以露出卡片的背面。

此项目尚未完成，需要逐步进行。我已经使用动态引用在JSX图像中的状态（在render-> return中）添加了卡的背面（初始状态）。他们按预期加载面朝下。 onClick会从事件中正确获取ID，并且我会尝试设置setState以在用户单击时显示一张牌面（通过“ selected”方法）。当我使用console.log测试时，将从事件中记录正确的ID，但是当我console.log状态时，它表示未定义。

我在做什么错？

import React, {Component} from 'react';
import './Game.css';
import cardBack from '../../Images/back.png';
import j from '../../Images/j.jpg';
import q from '../../Images/q.jpg';
import k from '../../Images/k.jpg';
import a from '../../Images/a.png';



class Game extends Component {

    state = {
        card0: cardBack, 
        card1: cardBack, 
        card2: cardBack, 
        card3: cardBack, 
        card4: cardBack, 
        card5: cardBack, 
        card6: cardBack, 
        card7: cardBack, 
        card8: cardBack, 
        card9: cardBack, 
        card10: cardBack, 
        card11: cardBack, 
        card12: cardBack, 
        card13: cardBack, 
        card14: cardBack, 
        card15: cardBack, 
    }

    selected = (event) => {
        let id = event.currentTarget.id;
        console.log(id);
        this.setState({id, q});
        console.log(this.state[id]);
    }


    render() {




        return (
            <div id="gameBox">
                <img src={this.state.card0} id="card0" className="card" onClick={this.selected}/>
                <img src={this.state.card1} id="card1" className="card" onClick={this.selected}/>
                <img src={this.state.card2} id="card2" className="card" onClick={this.selected}/>
                <img src={this.state.card3} id="card3" className="card" onClick={this.selected}/>
                <img src={this.state.card4} id="card4" className="card" onClick={this.selected}/>
                <img src={this.state.card5} id="card5" className="card" onClick={this.selected}/>
                <img src={this.state.card6} id="card6" className="card" onClick={this.selected}/>
                <img src={this.state.card7} id="card7" className="card" onClick={this.selected}/>
                <img src={this.state.card8} id="card8" className="card" onClick={this.selected}/>
                <img src={this.state.card9} id="card9" className="card" onClick={this.selected}/>
                <img src={this.state.card10} id="card10" className="card" onClick={this.selected}/>
                <img src={this.state.card11} id="card11" className="card" onClick={this.selected}/>
                <img src={this.state.card12} id="card12" className="card" onClick={this.selected}/>
                <img src={this.state.card13} id="card13" className="card" onClick={this.selected}/>
                <img src={this.state.card14} id="card14" className="card" onClick={this.selected}/>
                <img src={this.state.card15} id="card15" className="card" onClick={this.selected}/>
            </div>
        );
    }

}

export default Game;

Answer 1

this.setState( { [id] : q } );

尝试一下，希望效果很好。

Answer 2

问题是您尚未启动ID的状态

import React, {Component} from 'react';
import './Game.css';
import cardBack from '../../Images/back.png';
import j from '../../Images/j.jpg';
import q from '../../Images/q.jpg';
import k from '../../Images/k.jpg';
import a from '../../Images/a.png';



class Game extends Component {

    state = {
        card0: cardBack, 
        card1: cardBack, 
        card2: cardBack, 
        card3: cardBack, 
        card4: cardBack, 
        card5: cardBack, 
        card6: cardBack, 
        card7: cardBack, 
        card8: cardBack, 
        card9: cardBack, 
        card10: cardBack, 
        card11: cardBack, 
        card12: cardBack, 
        card13: cardBack, 
        card14: cardBack, 
        card15: cardBack, 
        id:null // initiating the state
    }

    selected = (event) => {
        let id = event.currentTarget.id;
        console.log(id);

        // Changed code
        this.setState({
           id
        }, () => { console.log(this.state.id)   })


    }


    render() {




        return (
            <div id="gameBox">
                <img src={this.state.card0} id="card0" className="card" onClick={this.selected}/>
                <img src={this.state.card1} id="card1" className="card" onClick={this.selected}/>
                <img src={this.state.card2} id="card2" className="card" onClick={this.selected}/>
                <img src={this.state.card3} id="card3" className="card" onClick={this.selected}/>
                <img src={this.state.card4} id="card4" className="card" onClick={this.selected}/>
                <img src={this.state.card5} id="card5" className="card" onClick={this.selected}/>
                <img src={this.state.card6} id="card6" className="card" onClick={this.selected}/>
                <img src={this.state.card7} id="card7" className="card" onClick={this.selected}/>
                <img src={this.state.card8} id="card8" className="card" onClick={this.selected}/>
                <img src={this.state.card9} id="card9" className="card" onClick={this.selected}/>
                <img src={this.state.card10} id="card10" className="card" onClick={this.selected}/>
                <img src={this.state.card11} id="card11" className="card" onClick={this.selected}/>
                <img src={this.state.card12} id="card12" className="card" onClick={this.selected}/>
                <img src={this.state.card13} id="card13" className="card" onClick={this.selected}/>
                <img src={this.state.card14} id="card14" className="card" onClick={this.selected}/>
                <img src={this.state.card15} id="card15" className="card" onClick={this.selected}/>
            </div>
        );
    }

}

export default Game;