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

Posted 2023-02-22

【中文标题】React Native - 状态改变但组件没有重新渲染

【英文标题】：React Native - State Changing but Component is not re-rendering

【发布时间】：2019-09-23 17:34:07

【问题描述】：

我正在制作一个用于更改 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>
        );
    

【问题讨论】：

使用this.setState(key,value)重新渲染组件

【参考方案1】：

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

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

看到这个，

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

【讨论】：

这是正确的方法。添加到答案是文档reactjs.org/docs/state-and-lifecycle.html

的链接

【参考方案2】：

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

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

setState(
stateVariable:NewValue 
)