Render() does not update after setState

I would like to exchange values between components using react-native.
Performed a changecount of the parent component from the child component event to update the parent component {selectedTab:0}.I expect to increase the number of times I tap sub2 with App and display it on Sub1, but render() seems to be called only once.If you run setState(), you will run render() for that component and its child components, so please let me know if you are wrong.

export default class App extensions Component {
      constructor(props){
        super(props);
        this.state = {selectedTab:0};
      }
      changecount() {
        count = this.state.selectedTab;
        This.setState({selectedTab:count+1});

      }
      render() {
        console.log(this.stae) // undefined
        return(
          <View style={styles.container}>
            <View style={style.sub1}>
              <Sub1selectnow={this.state.selectedTab}/>
            </View>
          <View style={style.sub2}>
           <Sub2method={this.changecount}/>
             </View>
           </View>
        );
      }
    }

    classSub1 extensions Component {
      constructor(props){
        super(props);
      }
      render() {
        return(
          <Text> {this.props.selectnow}</Text>
          );
      }
    }
    classSub2 extensions Component {
        constructor(props){
        super(props);
      }

      render() {
        return(
        <TouchableHighlight onPress={this.props.method.bind(this)}>
          <View style={style.substyle}>
            <Text>sub2</Text>
          </View>
       </TouchableHighlight>
          );
      }
    }

javascript reactjs react-native

2022-09-30 19:15

1 Answers

I don't know react-native and I only know react and I will answer you.

I understand that if you run setState(), the render() of the component and its child components will run.

I think this recognition is correct.

AppIn Component

<Sub2method={this.changecount}/>

However, I think we need to bind this changecount to the App instance.

 constructor(props){
    super(props);
    this.state = {selectedTab:0};
    this.changecount = this.changecount.bind(this);
  }

or using Arrow function

changecount=()=>{
    count = this.state.selectedTab;
    This.setState({selectedTab:count+1});
  }

or bind in the render function.

render(){
    console.log(this.stae) // undefined
    return(
      <View style={styles.container}>
        <View style={style.sub1}>
          <Sub1selectnow={this.state.selectedTab}/>
        </View>
      <View style={style.sub2}>
       <Sub2method={this.changecount.bind(this)}/>//<-here
         </View>
       </View>
    );
  }
}

And within Sub2,

<TouchableHighlight onPress={this.props.method.bind(this)}>

On the other hand, if you bind it, it won't work, so let's remove it.

<TouchableHighlight onPress={this.props.method}>

2022-09-30 19:15

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656