React Native - 状态改变但组件没有重新渲染

Question

我正在制作一个用于更改 Google Maps API 类型的菜单，但按下的状态没有按我的预期工作。请注意，在函数setPressedState 上更改this.state.pressed 后，Text 组件内的状态不会被重新渲染，并且在使用getPressed 后，它不会在包含MapMenu 组件的组件上重新渲染。

注意：警报显示按下的状态正在改变。

class MapMenu extends Component{
    constructor(props){
        super(props);

        this.state = {
            pressed: 'standard'
        }
    }

    setPressedState(press){
        this.state.pressed = press;
        Alert.alert(this.state.pressed)
    }

    getPressed(){
        return(this.state.pressed);
    }

    render(){
        return(
            <View style={styles.container}>
            <View style={{backgroundColor: 'red'}}><Text>{this.state.pressed}</Text></View>

                <TouchableOpacity   style={styles.button}
                                    onPress={() => this.setPressedState('standart')}
                >
                    <Text>Mapa</Text>
                </TouchableOpacity>
                <TouchableOpacity   style={styles.button}
                                    onPress={() => this.setPressedState('hybrid')}
                >
                    <Text>Hibrido</Text>
                </TouchableOpacity>
                <TouchableOpacity   style={styles.button}
                                    onPress={() => this.setPressedState('satellite')}
                >
                    <Text>Satellite</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

Answer 1

要重新渲染组件，您需要使用setState 方法，正如official documentation 中提到的那样：

一般来说，你应该在构造函数中初始化状态，然后当你想改变它时调用setState。

看到这个，

setPressedState = (press) => {
    this.setState({pressed:press}, () => {
      Alert.alert(this.state.pressed)
    });
}

Answer 2

这不是你正在做的正确方式，你不应该把状态当作你使用的任何其他变量并使用赋值运算符，

在对变量和常量做出反应时，您可以使用赋值运算符， 但如果是你应该使用的状态。

setState({
stateVariable:NewValue 
})