React Native：实时更新 useState

Question

我在 react native 上有这段代码，每次按下按钮后我都会将计数器增加 1

     function App() {
          const [counter,setCounter]=useState(0);
          return (
            <View>
              <Button title="hello" onPress={()=> 
              {setCounter(counter+1);console.log("display 
               counter in console" ,counter)}}>
                </Button>

              {counter%2==1 ? <Text> display counter in UI</Text> 
               : null }
    
               <View>
               <Text> thank you for clicking the button </Text>
               </View>
        
            </View>
           )
             }

第一次单击后，计数器等于 0，控制台显示 0 而不是 1，因此 JSX 组件不会显示。 我知道 useState 是异步的，但是如果显示 JSX 取决于实时更新状态，如何解决它。

更新：JSX 似乎在预期时显示，但我想知道为什么 console.log 不会实时更新？我的意思是为什么 console.log 在应该显示 1 时显示 0

Answer 1

您只需要在setCounter 状态上添加预增量运算符。并在 useState 声明中将 const 更改为 var。

https://snack.expo.dev/j70TThHHb

export default function App() {
              var [counter,setCounter]=useState(0);
              return (
                <View style={{marginTop:25}}>
                  <Button title="hello" onPress={()=> 
                  {setCounter(++counter);
                  console.log("display  counter in console" ,counter)}}>
                    </Button>
    
                  {counter%2==1 ? <Text> display counter in UI</Text> 
                   : null }
        
                   <View>
                   <Text> thank you for clicking the button </Text>
                   </View>
            
                </View>
               )
                 }

Answer 2

useState 钩子是异步的，所以你不能立即访问它的新值
而且它没有回调（不像setState）
但是如果你想听它的变化，你可以像这样使用useEffect钩子

useEffect(() => {
    console.log('display  counter in console', counter);
}, [counter]);