为啥我的状态没有在这个组件中设置

Posted 2023-02-23

【中文标题】为啥我的状态没有在这个组件中设置

【英文标题】：why is my state not being set in this component为什么我的状态没有在这个组件中设置

【发布时间】：2020-02-03 14:18:40

【问题描述】：

锻炼我的 React 技能，构建一个纸牌匹配游戏。有16张牌，你一次翻2张。如果匹配，它们会保持翻转并显示面孔，否则它们会翻转回来以显示卡片的背面。

这个项目还没有完成，正在逐步进行。我使用动态引用 JSX 图像中的状态（在渲染->返回中）添加了卡片背面（初始状态）。他们按预期加载面朝下。 onClick 正确地从事件中获取 id，并且我尝试 setState 在用户单击时显示卡片面（通过“选择”方法）。当我使用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;

【问题讨论】：

嘿，您的代码在我这边运行良好只需检查一件事是 console.log(this.state) 与您在此行 let id = event.currentTarget.id; 之前定义的值完全相同，因为在我这边没有任何问题数据来了，甚至什么都没做。

可能是cardBack 没有提供任何值

cardBack 的值是卡片背面的图像。它有效，因为我在开始时通过状态加载所有这些。你看到 16 张牌面朝下。需要从状态 onclick 更新图像

this.setState( [id] : q ); 试试这个

【参考方案1】：

this.setState(  [id] : q  );

试一试，希望效果很好。

【讨论】：

就是这样，我的设置状态有 , 而不是 : 语法不好。也将其包装在 [] 中帮助

【参考方案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;

【讨论】：

看起来您的解决方案正在放置一个console.logs 状态 ID 的函数。我可能不清楚。我希望新的图像源是点击时的新文件，就像它从为 cardBack 导入的图像开始一样，但在点击时我希望它显示 q 图像（女王）

好的，我明白你的问题给我一些时间