Question

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功能，并更改组件的状态，但渲染功能未调用。我很反应原生。有什么想法吗？

Answer 1

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

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>
        );
    }
}

Answer 2

确定要使用React.Component类。如果您使用的是React.PureComponent，则可能会出现此问题。希望这会有所帮助。

渲染不是要求改变状态

2 个答案: