React Native 同时修改同一个状态

Posted 2023-03-16

【中文标题】React Native 同时修改同一个状态

【英文标题】：React native modifying the same state at the same time

【发布时间】：2021-03-21 21:37:38

【问题描述】：

我刚刚开始学习一些 react native，我正在尝试制作一个简单的 cookie clicker 应用程序。 当我点击我的 cookie 时，cookiecount 增加 1，但我希望 cookie 计数也每秒增加 1。当我经常点击 cookie 并且 cookiecount 翻转并跳转到不同的数字并再次返回时，我认为这与我同时更新 cookiecount 状态 2 次有关？

export default function App(props) 
  /* Make the state that holds the amount of cookies */
  const [cookieCount, modifyCookieCount] = useState(0)
  const [costCount, modifyCostCount] = useState(10)
  const [perClickBoost, setBoost] = useState(1)
  const interval = setInterval(() => modifyCookieCount(cookieCount+1), 1000);

function addPurchase(count)
    modifyCookieCount(cookieCount-count)
    modifyCostCount(costCount+10);
    setBoost(perClickBoost+1)
  
  
  return (
    <View style=styles.container>
      <Text>cookieCount</Text>
      /* TouchableOpacity is needed to make use of Onpress prop */ 
      <TouchableOpacity onPress = addCookie>
        <Image style=styles.image source=require('./images/cookie.png')/>
      </TouchableOpacity>
        <Purchasables addPurchase=addPurchase count=cookieCount title='Koekjesslaaf' cost=costCount/>
      <StatusBar style="auto" />
    </View>
  );

  function addCookie()
    /* Add a cookie */
    modifyCookieCount(cookieCount+perClickBoost)
  

  

问题源于这两个更新：

  const interval = setInterval(() => modifyCookieCount(cookieCount+1), 1000);

和

  function addCookie()
    /* Add a cookie */
    modifyCookieCount(cookieCount+perClickBoost)
  

我希望有人可以帮助我解决这个问题，如果我的代码没有意义，我很抱歉，我刚刚开始学习。

【参考方案1】：

我的建议你可以拆分为 2 个变量来计数 cookie。

const [cookieAutoCount, modifyCookieAutoCount] = useState(0)
const [cookieTouchCount, modifyCookieTouchCount] = useState(0)

你需要做的是检查cookieAutoCount + cookieTouchCount > limit是否重置了这两个值 每次自动创建和触摸创建时检查两种情况