React Native 同时修改同一个状态

Question

我刚刚开始学习一些 React Native，我正在尝试制作一个简单的 Cookie Clicker 应用程序。当我点击我的 cookie 时，cookie 计数增加 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)
  }

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

Answer 1

我建议您可以拆分为 2 个变量来计算 cookie。

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

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

React Native 同时修改同一个状态

React native modifying the same state at the same time

javascript

state

setinterval

react-native

react-functional-component