レンダリングが状態変更で呼び出されていない

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