孫のコンポーネントが祖父母の状態を変更しない

Question

トリガーされたときにTabBarIOSで選択されたTabBarIOSアイテムを変更する必要があるNavigatorIOSの2層の深さのボタンがあります。次のようにコンポーネントが構成されている

：
--FooterTabs
を------ NavigatorIOS：一覧 - >のListItem

私が変わるFooterTabs内部の機能を有することにより、上記を実行しようとしていますstateの 'selectedTab' ===別の文字列のときに、 'selected'がtrueになるTabBar.Itemsを持つことができます。そのよう

：

_changeToAlarms(){ 
    console.log('Hello from Footer Tabs'); 
    this.setState({ 
     selectedTab: 'Alarms' 
    }); 
    } 

render(){ 
    return(
    <Icon.TabBarItemIOS title={'Alarms'} 
       iconName='ios-clock' 
       selected={this.state.selectedTab === 'Alarms'} 
       onPress={()=> { 
       this.setState({ 
        selectedTab: 'Alarms' 
       }); 
       }}> 
       <ComingSoon/> 
      </Icon.TabBarItemIOS> 

<Icon.TabBarItemIOS title={'Schedules'} 
        iconName='ios-moon' 
        selected={this.state.selectedTab === 'Schedules'} 
        onPress={()=> { 
        this.setState({ 
         selectedTab: 'Schedules' 
        }); 
        }}> 
       </Icon.TabBarItemIOS> 
); 
} 

Icon.TabBatItemが正確TabBarIOS.Itemのような役割を果たし*。

onPressが機能しますが、同様の方法で（コンポーネントの状態を変更することによって）タブを変更できるようにするため、私は_ SleepSchedulesの小道具として_changeToAlarms（）を渡しました。

<Icon.TabBarItemIOS ... 
        > 
        <NavigatorIOS 
        initialRoute={{ 
         component: SleepSchedules , 
         title: ' ', 
         passProps: {changeToAlarms:()=> this._changeToAlarms()} 
        }} 
        style={{flex: 1}} 
        /> 
       </Icon.TabBarItemIOS> 

そしてSleepSchedulesから、私は次のコンポーネントにナビゲートしていますし、小道具としてprevious'changeToAlarmsを渡します。

_handlePress(selectedSchedule){ 
    this.setState({selectedSchedule}); 

    this._navScheduleItem(selectedSchedule) 
    } 

    _navScheduleItem(scheduleName){ 

    this.props.navigator.push({ 
     title: `${scheduleName} Sleep`, 
     component: ScheduleItem, 
     passProps: {scheduleName}, changeToAlarms:()=> this.props.changeToAlarms 
    }) 
    } 

render(){ 
    return(
     ... 
     onPress={()=> this._handlePress('Monophasic')}> 
    ); 
} 

そしてでScheduleItem私はフッタータブから1でなければなりません渡された小道具「changeToAlarm」を呼び出そうとしています。

_handleTouch(){ 
    console.log('Hello from Schedule Item'); 
    this.props.changeToAlarms; 
} 

render(){ 
    return(
     ... 
     onPress={()=> this._handleTouch()} 
    ); 
} 

コンソールログ「ScheduleItemからこんにちは」私はそれを押すたびに、しかし「FooterTabsからこんにちは」を記録しません。また、タブを変更しません。

誰に間違いはありますか？

私は初心者ですから、どうもありがとうございました！ :)

Answer 1

this.props.changeToAlarmsの後にa（）が必要です。 this.props.changeToAlarms（）

Answer 2

もっと良いアプローチがあるかもしれないが、より多くのコードを見ることなく、何が起こっているのかを完全に把握することは難しいと思う。あなたの_handlePress機能に私の目を引くものがあった。あなたはsetStateを呼び出し、次に別の関数を呼び出しました。 ReactDocsによると

：

はSETSTATE との通話への呼び出しの同期動作の保証はパフォーマンス向上のためにバッチ処理することはできないがあります。

これは、あなたに問題を引き起こしている可能性があります。これ以上のコードはありません。関数を第2引数として取るsetStateにはoverload methodを使うことができます。

setState（nextState、callback） nextStateの浅いマージを現在の状態に行います。これは、イベントハンドラとサーバー要求>>コールバックからUI更新をトリガするために使用するプライマリ>メソッドです。

最初の引数は、オブジェクト（ 更新するゼロ以上のキーを含む）、または更新するためのキーを含むオブジェクト を戻し（ステートと小道具の）関数であることができます。

これは、次の機能が実行される前に、あなたのsetstateが完了することを保証します。

_handlePress(selectedSchedule){ 
    this.setState({selectedSchedule},() => 
    { 
     this._navScheduleItem(selectedSchedule); 
    }); 
    }