渲染没有调用状态更改 [英] render is not calling on state change

问题描述

export default class TopMiddleLoadingView extends React.Component{

    size = 66;

    constructor(props) {
        super(props);
        this.state = {
            fill : 99,
            timeLeft : props.timeLeft
        }
    }

    onPress(){
        this.setState = {
            ...this.state, fill:10
        }
    }

    componentWillUpdate(nextProps, nextState) {
        alert("componentWillUpdate");
    }

    render(){
        alert("render")
        return(
            <View style={{width:this.size, height:this.size}}>
                <View style={[styles.absoluteCenter,{zIndex:999}]}>
                    <Thumbnail source={Images.seaImg}></Thumbnail>
                </View>
                <Text>{this.state.fill}</Text>
                <Button
                    style={{width:50,height:50,backgroundColor:"red",position:"absolute",zIndex:999}}
                    onPress={this.onPress}
                ></Button>
            </View>
        );
    }
}

按钮按下，onPress 函数被点击，并改变组件的状态，但渲染函数没有调用.我对原生反应很陌生.有什么想法吗?

on button press, onPress function is clicked, and change the state of the component, but the render function is not calling. I am very new to react native. Any idea?

推荐答案

你不会改变状态，更不用说重新渲染了.如果你想重新渲染，那么你应该使用 setState() 方法改变状态.此外，您需要刷新 javascript this 知识

You aren't changing the state either let alone re render. And if you want to re render then you should change state using setState() method. Also, you need to refresh you javascript this knowledge

export default class TopMiddleLoadingView extends React.Component{

    size = 66;

    constructor(props) {
        super(props);
        this.state = {
            fill : 99,
            timeLeft : props.timeLeft
        }
    }

    onPress = () => {
        this.setState({fill:10})
    }

    componentWillUpdate(nextProps, nextState) {
        alert("componentWillUpdate");
    }

    render(){
        alert("render")
        return(
            <View style={{width:this.size, height:this.size}}>
                <View style={[styles.absoluteCenter,{zIndex:999}]}>
                    <Thumbnail source={Images.seaImg}></Thumbnail>
                </View>
                <Text>{this.state.fill}</Text>
                <Button
                    style={{width:50,height:50,backgroundColor:"red",position:"absolute",zIndex:999}}
                    onPress={this.onPress}
                ></Button>
            </View>
        );
    }
}

这篇关于渲染没有调用状态更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！