渲染不调用状态更改

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这个知识

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

每当该组件的状态发生变化时，都会调用 Render 方法。你应该使用 this.setState（{...this.state， fill：10} 用于更新组件的状态。这必须导致渲染函数再次触发，如果在 shouldComponentUpdate（） 中没有编写任何其他逻辑用于条件渲染。

希望这有帮助。还退房，在ReactJS中，this.state和this.setstate有什么区别？