

react-nativeを用いてコンポーネント間の値のやりとりをしたいと思いっています。  
子コンポーネントのイベントから親コンポーネントのchangecountを実行して、親コンポーネントの{selectedTab:0}を更新。sub2をタップした回数をAppでインクリメントしてSub1に表示することを期待していますが、render()は一度しか呼ばれてないようです。setState()を実行すれば、そのコンポーネントと子コンポーネントのrender()が実行されるという認識なので間違っていたらご指摘お願いします。

[code]

        export default class App extends 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={styles.sub1}>
                  <Sub1 selectnow={this.state.selectedTab}/>
                </View>
              <View style={styles.sub2}>
               <Sub2 method={this.changecount}/>
                 </View>
               </View>
            );
          }
        }
    
        class Sub1 extends Component{
          constructor(props) {
            super(props);
          }
          render(){
            return(
              <Text>{this.props.selectnow}</Text>
              );
          }
        }
        class Sub2 extends Component{
            constructor(props) {
            super(props);
          }
    
          render(){
            return(
            <TouchableHighlight onPress={this.props.method.bind(this)}>
              <View style={styles.substyle}>
                <Text>sub2</Text>
              </View>
           </TouchableHighlight>
              );
          }
        }
    
[/code]


CC BY-SA 3.0
2017-10-15T04:14:00.590
38711
2018-02-15T23:30:22.973
25769
question
javascript reactjs react-native
setState後、render()が更新されない


`react-native`は知らず`react`だけ知っててお答えしますが、

> setState()を実行すれば、そのコンポーネントと子コンポーネントのrender()が実行されるという認識なので

この認識は間違っていないと思います。

`App` Component内で

[code]

    <Sub2 method={this.changecount}/>
    
[/code]

としていますが、この`changecount`を`App`インスタンスにbindする必要があるかと思います。

[code]

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

とするかまたはArrow functionを用いて

[code]

      changecount = () => {
        count = this.state.selectedTab;
        this.setState({selectedTab:count+1});
      }
    
[/code]

とするかまたは`render`関数内で`bind`します。

[code]

      render() {
        console.log(this.stae) //undefined
        return (
          <View style={styles.container} >
            <View style={styles.sub1}>
              <Sub1 selectnow={this.state.selectedTab}/>
            </View>
          <View style={styles.sub2}>
           <Sub2 method={this.changecount.bind(this)}/>  // <- here
             </View>
           </View>
        );
      }
    }
    
[/code]

そして`Sub2`内では

[code]

    <TouchableHighlight onPress={this.props.method.bind(this)}>
    
[/code]

逆にbindするとまずいので、外しましょう。

[code]

    <TouchableHighlight onPress={this.props.method}>
    
[/code]


CC BY-SA 3.0
2017-10-15T13:11:59.057
38726
2017-10-15T13:11:59.057
20206
38711
answer