反应：当我用后增量更改变量的状态时，程序中的值不同

Posted 2023-02-21

【中文标题】反应：当我用后增量更改变量的状态时，程序中的值不同

【英文标题】：React: Not same value in program when i change the state of my variable with post-increment

【发布时间】：2021-09-16 14:43:38

【问题描述】：

当我使用后增量运算符更改变量状态时，count 变量使用旧值... 让我用这个应用程序的例子来解释：

当我按下带有以下代码的按钮时，应用程序会显示这个系列：

0 - 0 - 1 - 1 - 2 - 2 - 3 - 3 - 4 - 4 - 5 - 5 ...

但在数学逻辑上，应该显示这个系列：

0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 ...

代码：

import React,  useState  from 'react';

import  Button, SafeAreaView, Text, View,  from 'react-native';

function App()
  let [count, setCount] = useState(0);

  return (
    <SafeAreaView>
      <View>
        <Text>count</Text>
        <Button
          onPress=()=>
            console.log("A",count); // <--- OLD value: 0
            setCount(count++);      // <--- NEW value: so, it setState count to 0.
            console.log("Z",count); // <--- NEW value: 1
            /*
                So, know, in my app count has 0. But the program has 1. Ok.
                But, if i press again, setState will not use the new value
                who is 1, but the old value who is 0! Why !?
            */
          
          title="Press!"
        />
      </View>
    </SafeAreaView>
  );


export default App;

谢谢！

【参考方案1】：

setCount(count++);     

这不会增加状态直到另一个渲染。

改成：

setCount(count + 1)

setCount(count++) 所做的是增加变量，这与组件的生命周期方法无关，因为您没有使用 setter。

所以，你正在做的是

0 - 呈现默认值 0 - setCount(count++) 不更新 state，只是 count 变量，所以再次渲染 0 1 - 你现在已经 setCount 到 count 变量，现在是上次渲染后的 1 1 - 你已经渲染了当前状态，它仍然是 1 等等...

【参考方案2】：

当您使用 setState 时，组件会重新呈现。

这意味着状态为 0 的组件被销毁，状态为 1 的新组件显示为全新。

当您在 setState 之后立即调用控制台日志时，或者它不会显示在控制台中，或者在您的情况下，它会显示组件在被销毁之前的值。

要明智地在状态上使用控制台日志，请在 react 组件返回之前应用控制台日志

function App()
  const [count, setCount] = useState(0);
  console.log(count)
  return ( ...
)