Javascript 反应JS纸牌游戏，计算状态值

我正在用React JS制作一个纸牌游戏，需要3套独特的纸牌。 该格式的工作方式是有成分卡，可以创建药剂。配料在游戏的第一行处理，所以我有一个叫做TopRow的组件

因为这些不是普通的扑克牌，所以我不得不为交易生成5张不同扑克牌中各10张的阵列。（洗牌（a）） 然后，我把这笔交易拼接起来，只得到5张卡片（a.拼接（5）；）

因此，我希望成分的值根据成分出现的次数递增，例如：function handleHoneyIncrement应将countHoney增加1

我试过几种不同的方法，我想我在如何做一个for循环的问题上脑子出了个屁

function TopRow(props) {
let a=["Honey0", "Bone0", "Herbs0", "Mushroom0", "Seeds0",
"Honey1", "Bone1", "Herbs1", "Mushroom1", "Seeds1",
"Honey2", "Bone2", "Herbs2", "Mushroom2", "Seeds2",
"Honey3", "Bone3", "Herbs3", "Mushroom3", "Seeds3",
"Honey4", "Bone4", "Herbs4", "Mushroom4", "Seeds4",
"Honey5", "Bone5", "Herbs5", "Mushroom5", "Seeds5",
"Honey6", "Bone6", "Herbs6", "Mushroom6", "Seeds6",
"Honey7", "Bone7", "Herbs7", "Mushroom7", "Seeds7",
"Honey8", "Bone8", "Herbs8", "Mushroom8", "Seeds8",
"Honey9", "Bone9", "Herbs9", "Mushroom9", "Seeds9"
];

shuffle(a);

function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
  }
  return a.splice(5);
}
let imageIngredients = a.map(image => {
   return <img key={image} src={require(`../pngs/${image}.png`)}
   alt="ingredients" className="img-responsive" 
   style={{width:"15%", float:"left"}}
   />
});

  let handleHoneyIncrement = () => {
    if (shuffle.length= "Honey0" ||"Honey1" ||"Honey2" ||"Honey3" ||"Honey4" ||"Honey5" ||"Honey6" ||"Honey7" || "Honey8" || "Honey9" ){
      this.setState({countHoney: this.state.countHoney + 1})
    };
  };

    return (
<div className="row" id="topRow"
          style={{WebkitBorderRadius:2, WebkitTextStrokeColor: "red", width:"90%", maxHeight:"30%", padding:0}} >
            <div className="col-6-md">
            <img src={require('../pngs/IngredientBacks.png')} alt="ingredientsBack" style={{width:"15%", float:"left"}} /> 
            </div>

            <div className="col-6-md">
                {imageIngredients}
                {handleHoneyIncrement}
              {a}
            </div>
             </div>
);}
export default TopRow;

函数顶行（道具）{
设a=[“Honey0”、“Bone0”、“Herbs0”、“Mushroom0”、“Seeds0”，
“蜂蜜1”，“骨头1”，“草1”，“蘑菇1”，“种子1”，
“蜂蜜2”，“骨头2”，“草2”，“蘑菇2”，“种子2”，
“蜂蜜3”，“骨头3”，“草3”，“蘑菇3”，“种子3”，
“蜂蜜4”，“骨头4”，“草4”，“蘑菇4”，“种子4”，
“蜂蜜5”、“骨头5”、“草5”、“蘑菇5”、“种子5”，
“蜜糖6号”、“Bone6号”、“Herbs6号”、“蘑菇6号”、“种子6号”，
“蜂蜜7”、“骨头7”、“草本7”、“蘑菇7”、“种子7”，
“蜂蜜8”，“骨头8”，“草8”，“蘑菇8”，“种子8”，
“蜂蜜”、“骨头”、“草”、“蘑菇”、“种子”
];
洗牌（a）；
函数洗牌（a）{
对于（设i=a.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[a[i]，a[j]=[a[j]，a[i]]；
}
返回a.拼接（5）；
}
让ImageComponents=a.map（图像=>{
返回
});
让handleHoneyIncrement=（）=>{
如果（shuffle.length=“Honey0”| |“Honey1”| |“Honey2”| |“Honey3”| |“Honey4”|“Honey5”| |“Honey6”|“Honey7”|“Honey8”|“Honey9”）{
this.setState（{countHoney:this.state.countHoney+1}）
};
};
返回(
{ImageComponents}
{handlehoney}
{a}
);}
导出默认TopRow；

无法100%确定这是否是您想要的，但听起来您只需要将成分列表转换为成分/计数对的集合

const ingredientCounts = a.reduce((obj, curr) => ({
  ...obj,
  [curr]: obj[curr] ? obj[curr] + 1 : 1
}), {})

ingredientCounts["Honey0"] // 1

如果您希望将所有蜂蜜一起计算，如Honey0+Honey1等，那么这应该可以：

const ingredientCounts = a.reduce((obj, curr) => {
  const keys = ["Honey", "etc"]; // maybe this list should be somewhere else, IDK
  const key = keys.find(k => curr.includes(k)); // missing null check :)
  return {
    ...obj,
    [key]: obj[key] ? obj[key] + 1 : 1
  }
}, {})

ingredientCounts["Honey"] // 10

然后我们可以为所有这些设置状态，如：

this.setState({
  counts: ingredientCounts
})

并具有如下计数状态：

{
  Honey: 10,
  etc: 0
}

---

不是100%确定这是否是你想要的，但听起来你只需要将成分列表变成一组成分/计数对

const ingredientCounts = a.reduce((obj, curr) => ({
  ...obj,
  [curr]: obj[curr] ? obj[curr] + 1 : 1
}), {})

ingredientCounts["Honey0"] // 1

如果您希望将所有蜂蜜一起计算，如Honey0+Honey1等，那么这应该可以：

const ingredientCounts = a.reduce((obj, curr) => {
  const keys = ["Honey", "etc"]; // maybe this list should be somewhere else, IDK
  const key = keys.find(k => curr.includes(k)); // missing null check :)
  return {
    ...obj,
    [key]: obj[key] ? obj[key] + 1 : 1
  }
}, {})

ingredientCounts["Honey"] // 10

然后我们可以为所有这些设置状态，如：

this.setState({
  counts: ingredientCounts
})

并具有如下计数状态：

{
  Honey: 10,
  etc: 0
}

---

我不能100%确定我是否正确理解了您的目标，但我认为一个简化版本是您想要展示的：

• 从你的牌组中随机抽取5张牌
• 一种按钮或触发器，用于洗牌并显示同一牌组中5张牌的新牌
• 更新手牌时累积的蜂蜜卡总数的计数

在您的代码示例中有许多令人困惑的事情，因此，我没有尝试进行更正，而是快速演示了如何处理该问题，并给出了一些注释，解释了在这些假设下我所做的不同之处

import React，{useState，useffect}来自“React”；
//牌组可能是一个常数，其值永远不会直接改变。
//有可能我错了，甲板确实发生了变化，但即使如此，我也能想象
//它将来自父组件的道具或上下文。不管怎样
//卡片数组不应该是可变的。
常数卡=[
“蜜糖0”、“博尼0”、“香草0”、“蘑菇0”、“种子0”，
“蜂蜜1”，“骨头1”，“草1”，“蘑菇1”，“种子1”，
“蜂蜜2”，“骨头2”，“草2”，“蘑菇2”，“种子2”，
“蜂蜜3”，“骨头3”，“草3”，“蘑菇3”，“种子3”，
“蜂蜜4”，“骨头4”，“草4”，“蘑菇4”，“种子4”，
“蜂蜜5”、“骨头5”、“草5”、“蘑菇5”、“种子5”，
“蜜糖6号”、“Bone6号”、“Herbs6号”、“蘑菇6号”、“种子6号”，
“蜂蜜7”、“骨头7”、“草本7”、“蘑菇7”、“种子7”，
“蜂蜜8”，“骨头8”，“草8”，“蘑菇8”，“种子8”，
“蜂蜜”、“骨头”、“草”、“蘑菇”、“种子”
];
const initialCards=[]；
功能顶行（道具）{
//保持当前牌的状态，而不是改变数组
//直接在功能体中。反应功能组件应为纯，
//所有副作用都发生在效果挂钩内部。
let[卡片，设置卡片]=使用状态（初始卡片）；
让[honeyCount，setHoneyCount]=useState(
CountSubstring（姓名首字母卡，“亲爱的”）
);
让ImageComponents=cards.map（image=>(
));
函数shuffleCards（）{
//使用原始阵列（牌组）重置牌手
套牌（洗牌牌牌）；
}
//将所有状态返回到初始值
函数重置（）{
设置卡（首字母卡）；
setHoneyCount（countsubstring（缩写为“蜂蜜”）；
}
//任何时候我们的卡更新，我们想增加蜂蜜的数量
//useState接受惰性初始值设定项来访问
//以前的状态，这对于这样的效果非常有用！
useffect（（）=>{
setHoneyCount（count=>count+countsubstring（卡片，“蜂蜜”）；
}，[卡片]；
返回(
{cards.length？“洗牌”：“发牌”}
重置

{ImageComponents}

总蜂蜜数：{honeyCount}
);
}
导出默认TopRow；
//我将这些实用函数放在组件体之外，因为没有
//在每次渲染时重新创建它们的真正原因。
/**
*@param{any[]}数组
*/
函数shuffleArray（数组）{
对于（设i=array.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[array[i]，array[j]=[array[j]，array[i]