Javascript 多个状态更改后，React useState开始监听

我正在制作一款饼干点击器类型的游戏，我正在制作自动点击器/组合乘法器等功能。我创造了游戏的开始，但当我使用我的自动功能，它开始窃听后，点击多次。我已经将代码和下面发生的错误的一个示例链接起来

代码

import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, Image } from "react-native";

import { cases } from "./cases";

import { motion } from "framer-motion";

const io = require("socket.io-client");
const SocketEndpoint = "http://localhost:3000/";

const App = () => {
  const [cash, setCash] = useState(0);
  const [clicks, setClicks] = useState(0);
  const [bot, setBot] = useState(0);
  const [open, setOpen] = useState(false);
  const [prize, setPrize] = useState(null);
  const [connected, setConnected] = useState(false);
  const [upgrades, setUpgrades] = useState({auto: false, multi: false})
  const [multi, setMulti] = useState(1);
  let applied = false;
  
  useEffect(() => {[![enter image description here][1]][1]
    const socket = io(SocketEndpoint, {
      transports: ["websocket"],
    });

    socket.on("connect", () => {
      setConnected(true)
    });
  }, [])  

  useEffect(() => {
    if(!applied) {
      autoUpgrade();
      applied = true;
    }
  }, [bot, upgrades])

  const autoUpgrade = () => {
    if (!upgrades.auto) {
      return;
    }

    const inter = setInterval(() => setBot(bot + 1), 1000);
    return () => clearInterval(inter);
  }

  const collectBotIncome = () => {
    setCash(cash + bot);
    setBot(0);
  }

  const addMulti = () => {
    if (!upgrades.multi) {
      return;
    }
    setMulti(2)
  }

  const increasePoint = () => {
    setClicks(clicks + (1 * multi))
  }

  const purchaseCase = () => {
    setClicks(clicks - 10)
  }

  const purchaseUpgrade = (upgrade) => {
    alert('purchased')
    
    upgrade === 'auto' ? setUpgrades({...upgrades, auto: true}) : null;
    upgrade === 'multi' ? setUpgrades({...upgrades, multi: true}) : null;
  }

  const between = (x, min, max) => {
    return x >= min && x <= max;
  }

  const openCase = () => {
    setOpen(true);
    purchaseCase();

    const ticket = Math.floor(Math.random() * 10000);
    console.log('[ROUND] Ticket:' + ticket)
    var found = false;
    var i;

    for (i = 0; i < cases.types[0].items.length; i++) {
      var item = cases.types[0].items[i];

      if(between(ticket, item.ticketStart, item.ticketEnd)) {
        setPrize(item.name)

        found = true;
      }
    }
  }

    return (
      <View style={styles.container}>

        <View style={styles.shopMenu}>
          <Text style={{color: 'white'}}>Shop</Text>

          <Text onClick={() => purchaseUpgrade('auto')} style={{color: 'white'}}>Auto Click Level 1</Text>
          <Text onClick={() => purchaseUpgrade('multi')} style={{color: 'white'}}>Click Multiplier Level 1</Text>
        </View>

        <View style={styles.shopMenu}>
          <Text style={{color: 'white'}}>Inventory</Text>

          {upgrades.auto
            ? 
              <>
                <Text style={{color: 'white'}}>{bot}</Text>
                <Text onClick={collectBotIncome} style={{color: 'white'}}>Collect Bot Income</Text>
              </>
            : null
          }
        </View>
        
        <motion.img
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
          onClick={increasePoint}
          src={require('./src/assets/case.png')} alt="case"
        />
        <Text style={{color: 'white'}}>clicks: {clicks ? clicks : "0"}</Text>
        <Text style={{color: 'white'}}>connected: {connected ? "true" : "false"}</Text>



        {open 
          ? <Text style={{color: 'white'}}>{prize ? prize : 'Failed to get Prize'}</Text>
          : <Image
            style={clicks >= 10 ? styles.available : styles.unavailable}
            source={require('./src/assets/case.png')} alt="case"
            onClick={openCase}
          />
        }

        <Text style={{color: 'white'}}>{cases.types[0].name}</Text>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
    alignItems: "center",
    justifyContent: "center",
  },
  available: {
    display: 'flex',
    width: 150,
    height: 100,
    filter: 'none',
    transition: '200ms ease',
    marginTop: 50
  },
  unavailable: {
    display: "flex",
    width: 150,
    height: 100,
    filter: 'grayscale(1)',
    transition: '200ms ease',
    marginTop: 50
  },
  shopMenu: {
    display: "flex",
    flexDirection: "column"
  }
});

export default App;

import React，{useState，useffect}来自“React”；
从“react native”导入{样式表、文本、视图、图像}；
从“/cases”导入{cases}”；
从“框架运动”导入{motion}；
const io=require（“socket.io客户端”）；
常数SocketEndpoint=”http://localhost:3000/";
常量应用=（）=>{
const[cash，setCash]=useState（0）；
const[clicks，setClicks]=useState（0）；
const[bot，setBot]=useState（0）；
const[open，setOpen]=useState（false）；
const[prize，setPrize]=useState（null）；
const[connected，setConnected]=useState（false）；
const[upgrades，setUpgrades]=useState（{auto:false，multi:false}）
const[multi，setMulti]=useState（1）；
让应用=假；
useEffect（（）=>{[！[在此处输入图像描述][1][1]
常量套接字=io（SocketEndpoint{
传输：[“websocket”]，
});
socket.on（“连接”，（）=>{
setConnected（真）
});
}, [])  
useffect（（）=>{
如果（！已应用）{
自动升级（）；
应用=真；
}
}，[bot，升级]）
常量自动升级=（）=>{
如果（！upgrades.auto）{
返回；
}
const inter=setInterval（（）=>setBot（bot+1），1000）；
return（）=>clearInterval（inter）；
}
const collectBotIncome=（）=>{
setCash（现金+bot）；
挫折（0）；
}
常量addMulti=（）=>{
如果（！upgrades.multi）{
返回；
}
setMulti（2）
}
常量增量点=（）=>{
设置单击（单击+（1*多次））
}
const purchaseCase=（）=>{
设置点击次数（点击次数-10次）
}
const purchaseUpgrade=（升级）=>{
警报（“已购买”）
升级=='auto'？setUpgrades（{…升级，auto:true}）：空；
升级=='multi'？setUpgrades（{…升级，multi:true}）：空；
}
常数介于=（x，最小值，最大值）=>{
返回x>=min&&x{
setOpen（真）；
purchaseCase（）；
const ticket=Math.floor（Math.random（）*10000）；
console.log（'[轮]票证：'+票证）
var=false；
var i；
对于（i=0；i自动单击级别1
purchaseUpgrade（'multi'）}样式={{color:'white'}}>单击倍增级别1
库存
{upgrades.auto
? 
{bot}
收取Bot收入
：null
}
点击：{点击？点击：“0”}
已连接：{已连接？“真”：“假”}
{打开
？{prize？prize:'未能获得奖品'}
：=10？styles.available:styles.unavailable}
source={require（'./src/assets/case.png'）}alt=“case”
onClick={openCase}
/>
}
{cases.types[0].name}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“黑色”，
对齐项目：“中心”，
辩护内容：“中心”，
},
提供：{
显示：“flex”，
宽度：150，
身高：100，
筛选器：“无”，
过渡：“200毫秒轻松”，
玛金托普：50
},
不可用：{
显示：“flex”，
宽度：150，
身高：100，
过滤器：“灰度（1）”，
过渡：“200毫秒轻松”，
玛金托普：50
},
商店菜单：{
显示：“flex”，
flexDirection：“列”
}
});
导出默认应用程序；

预览