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

学习我的反应技巧，建立一个纸牌比赛游戏。有16张牌，你一次翻两张。如果这是一场比赛，他们保持翻转，并显示的面孔，如果不是他们翻转回来，以显示背面的卡

这个项目还没有完成，一步一步地工作。我在JSX图像中（在render->return中）使用对状态的动态引用添加了卡回（初始状态）。它们像预期的那样正面朝下装载。onClick正确地从事件中获取id，并且我尝试设置state以在用户单击时显示一个卡片面（通过“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;

import React，{Component}来自'React'；
导入“/Game.css”；
从“../../Images/back.png”导入回读卡；
从“../../Images/j.jpg”导入j；
从“../../Images/q.jpg”导入q；
从“../../Images/k.jpg”导入k；
从“../../Images/a.png”导入图像；
类游戏扩展组件{
状态={
card0:cardBack，
card1:cardBack，
card2:cardBack，
卡片3:cardBack，
card4:cardBack，
card5:cardBack，
卡片6:cardBack，
卡片7:cardBack，
卡片8:cardBack，
卡片9:cardBack，
卡片10:cardBack，
卡片11:cardBack，
卡片12:cardBack，
卡片13:cardBack，
card14:cardBack，
card15:cardBack，
}
选定=（事件）=>{
设id=event.currentTarget.id；
console.log（id）；
this.setState（{id，q}）；
console.log（this.state[id]）；
}
render（）{
返回(
);
}
}
出口违约博弈；

问题是您尚未启动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;

import React，{Component}来自'React'；
导入“/Game.css”；
从“../../Images/back.png”导入回读卡；
从“../../Images/j.jpg”导入j；
从“../../Images/q.jpg”导入q；
从“../../Images/k.jpg”导入k；
从“../../Images/a.png”导入图像；
类游戏扩展组件{
状态={
card0:cardBack，
card1:cardBack，
card2:cardBack，
卡片3:cardBack，
card4:cardBack，
card5:cardBack，
卡片6:cardBack，
卡片7:cardBack，
卡片8:cardBack，
卡片9:cardBack，
卡片10:cardBack，
卡片11:cardBack，
卡片12:cardBack，
卡片13:cardBack，
card14:cardBack，
card15:cardBack，
id:null//正在启动状态
}
选定=（事件）=>{
设id=event.currentTarget.id；
console.log（id）；
//更改代码
这是我的国家({
身份证件
}，（）=>{console.log（this.state.id）}）
}
render（）{
返回(
);
}
}
出口违约博弈；

问题是您尚未启动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;

import React，{Component}来自'React'；
导入“/Game.css”；
从“../../Images/back.png”导入回读卡；
从“../../Images/j.jpg”导入j；
从“../../Images/q.jpg”导入q；
从“../../Images/k.jpg”导入k；
从“../../Images/a.png”导入图像；
类游戏扩展组件{
状态={
card0:cardBack，
card1:cardBack，
card2:cardBack，
卡片3:cardBack，
card4:cardBack，
card5:cardBack，
卡片6:cardBack，
卡片7:cardBack，
卡片8:cardBack，
卡片9:cardBack，
卡片10:cardBack，
卡片11:cardBack，
卡片12:cardBack，
卡片13:cardBack，
card14:cardBack，
card15:cardBack，
id:null//正在启动状态
}
选定=（事件）=>{
设id=event.currentTarget.id；
console.log（id）；
//更改代码
这是我的国家({
身份证件
}，（）=>{console.log（this.state.id）}）
}
render（）{
返回(
);
}
}
出口违约博弈；

试试看，希望效果不错

---

试试看，希望效果很好。

嘿，你的代码在我这边运行得很好，只需检查一件事是

console.log（this.state）

的值与你在这一行之前定义的值完全相同

let id=event.currentTarget.id，因为在我这方面没有任何问题，数据来了，甚至没有做任何事情。可能是
cardBack
没有提供任何值cardBack的值是卡背面的图像。它可以工作，因为我在开始时通过state加载了所有这些文件。你看到16张牌面朝下。需要从state onclick
this.setState（{[id]：q}）获取更新后的图像试试这一行嘿，你的代码在我这边运行得很好，只需检查一件事是
console.log（this.state）
的值与你在这一行之前定义的值完全相同
let id=event.currentTarget.id，因为在我这边没有任何问题，数据来了，甚至什么都没做。可能是
cardBack
没有给出任何值cardBack的值是