Javascript 在不实际更改值的情况下对更改值作出反应

我正在尝试制作一款类似紫色对紫色宫殿的游戏。我想做的是，每当点击两个值不相等的元素时，卡就会自动关闭，但发生的情况有所不同。每当我点击了两张错误的卡，然后选择了另一张卡，那么值就会被更改，即使我没有编写任何代码这样做。这是非常令人沮丧的，我没有办法解决这个问题。请帮我解决这个问题

原始代码笔链接

我认为问题出在

handleClick

函数的某个地方

功能卡（道具）{
const[show，setShow]=useState（选择的道具）；
handleClick=（e）=>{
如果（选择道具）{
设置显示（正确）；
}否则{
props.onClick（）；
设置显示（！show）；
}
};
常量style1={
背景：“灰色”，
变换：`rotateY（${！show？0:180}度）`
};
常量style2={
背景：“aaa”，
变换：`rotateY（${show？0:180}度）`
};
返回(
{props.value}
);
}
类GameBoard扩展了React.Component{
构造函数（）{
超级（）；
此.state={
分数：0，
时间:0,，
列表：[…generateObList（），…generateObList（）]，
计数：0
};
}
handleClick=async（id）=>{
等待此消息。单击BTN（id）；
const list=\ u0.cloneDeep（this.state.list）；
const current=list.find（（a）=>a.id==id）；
对于（列表中的x）{
如果(
x、 点击&&
x、 id！=id&&
x、 value==list.find（（a）=>a.id==id）.value
) {
x、 选择=正确；
x、 单击=假；
current.selected=true；
current.clicked=false；
此.setState（（上一个）=>({
列表：上一个列表映射（（el）=>
el.id==id？当前：el.value===current.value？x:el
),
分数：上一个分数+1
}));
}else if（this.state.count%2==0&&x.clicked）{
控制台日志（“输入”）；
current.clicked=false；
x、 单击=假；
此.setState（（上一个）=>({
列表：上一个列表映射（（el）=>
el.id==id？当前：el.value===current.value？x:el
)
}));
}
}
};
单击BTN=（id）=>{
const current=..cloneDeep（this.state.list）.find（（e）=>e.id==id）；
让deClick=current.clicked；
current.clicked=！current.clicked；
此.setState（（上一个）=>({
列表：上一个列表映射（（el）=>（el.id==id？当前：el）），
计数：上一个计数+（取消单击？-1:1）
}));
};
render（）{
const boardStyle={
gridTemplateColumns:`repeat（5，1fr）`，
gridTemplateRows:`重复（5,1r）`
};
让list=this.state.list.map（（n）=>(
{
这是handleClick（n.id）；
}}
选择={n.selected}
单击={n.clicked}
/>
));
返回(
{list}
);
}
}

handleClick函数中存在一些严重问题。出现问题的主要原因是您设法用其他列表项替换列表项

此行中正在发生覆盖问题。我不完全确定这是为什么会导致这个问题，但事实确实如此

          list: prev.list.map((el) =>
            el.id === id ? current : el.value === current.value ? x : el
          )

如果您只是将其替换为以下内容，则问题将消失：

          list: prev.list.map((el) => el.clicked ? {...el, clicked:false}: el)

clickBtn不是一个异步函数，因此在其上使用Wait不会起任何作用。如果你想等待国家改变，你需要解决一个承诺。我已经有一段时间没有使用类组件了，所以我不知道这是否是一种特别受鼓励的使用类组件的方法，但可能还有其他方法：

      await new Promise((resolve) =>
        this.setState(
          (prev) => ({
            list: prev.list.map((card) =>
              card.clicked ? { ...card, clicked: false } : card
            ),
            freeze: false
          }),
          () => resolve()
        )
      );

另一件需要注意的事情是，你在游戏板上保持了卡被点击的状态，所以没有理由让卡有状态，事实上，这就是卡不会翻转的原因

通过将卡片的开始从使用

useState

更改为仅使用道具值，这是固定的：

  const show = props.chosen||props.clicked;
  handleClick = (e) => {
    if (props.chosen) {
    } else {
      props.onClick();
    }
  };

---

重构： 我做了一些重构，以使一切正常工作，同时我正在找出哪里出了问题

我在实现逻辑方面也有一些乐趣，这就是为什么我在用户猜错时添加了带超时的翻转行为

const{shuffle}=\；
常量numbersList=[1,2,3,4,5,6,7,8,9,10]；
设id=0；
const generateObList=（）=>{
返回号码列表.map（（e）=>({
//使用更能保证价值不相同的东西
//Math.random*可能会发生冲突，但不太可能。
id:id++，
价值：e，
选择：错误，
单击：false
}));
};
//在这里使用洗牌算法来洗牌。
const generateList=（）=>shuffle（[…generateBlist（），…generateBlist（）]）；
功能卡（道具）{
const show=props.selected | | props.clicked；
//删除本地状态，这只是个问题
//让父对象控制状态。
常量handleClick=（e）=>{
如果（选择道具）{
}否则{
props.onClick（）；
}
};
常量style1={
背景：“灰色”，
变换：`rotateY（${！show？0:180}度）`
};
常量style2={
背景：“aaa”，
变换：`rotateY（${show？0:180}度）`
};
返回(
{props.value}
);
}
类GameBoard扩展了React.Component{
构造函数（）{
超级（）；
此.state={
分数：0，
时间:0,，
列表：generateList（），
计数：0，
冻结：错误
};
}
timerId=null；
性能更新=（id）=>{
//翻转列表中的相关卡片
const list=this.state.list.map（（卡片）=>
card.id==id？{…card，单击：！card.clicked}：card
);
//获取活动卡
const current=list.find（（card）=>card.id==id）；
//获取与当前值匹配的所有卡
让matches=list.filter（（card）=>card.value==current.value）；
//不知怎的，这张卡已经是c了