React 本机按钮需要两次单击才能更改状态

Question

当我单击“显示元素”按钮时，我想将状态更改为 true 当我点击“隐藏元素”按钮时，我想将状态更改为 false

但是当我第一次单击“显示元素”按钮时，它不会更改为 true，并且需要我第二次单击按钮才能将状态更改为 true。当我点击“隐藏元素”按钮时也是如此

这是我的代码：

import * as React from 'react';
import { View, Text, StyleSheet, Platform, AsyncStorage, TouchableHighlight, ScrollView, SafeAreaView, Button  } from 'react-native'

class Base extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isForShowVar: true
    }
  }

  render() {
    return(
      <View>
        <Button
            style={{marginTop:50, width:150}}
            title="Hide Element"
            onPress={()=>{ alert(this.state.isForShowVar); this.setState({isForShowVar: false});  }}
          />  
          <Button
            style={{marginTop:50, width:150}}
            title="Show Element"
            onPress={()=>{ alert(this.state.isForShowVar); this.setState({isForShowVar: true});  }}
          />  
      </View>
    )
  }
}

export default Base;

你可以在here测试代码

当我第一次点击按钮时如何改变状态？

谢谢

Answer 1

Ciao，这是因为您在设置之前阅读了isForShowVar。无论如何，如果您在this.setState 之后移动警报，您将获得旧值，因为this.setState 是异步的。但是你可以像这样使用this.setState 回调：

this.setState({isForShowVar: true}, () => {
   alert(this.state.isForShowVar); 
});

Here您的代码已修改。