Enkelkind Komponente nicht ändern Großvater Status

Question

Es gibt eine Schaltfläche 2 Ebenen tief in einem NavigatorIOS, die, wenn ausgelöst wird, sollte die TabBarIOS ausgewählten TabBarIOS Item ändern.

Die Komponenten sind wie folgt strukturiert:
--FooterTabs
------ NavigatorIOS: Liste -> ListItem

Ich bin versucht, indem eine Funktion innerhalb FooterTabs die oben zu tun, das ändert sich die state und TabBar.Items, deren Prop 'selected' wahr wird, wenn der 'selectedTab' des Staates === verschiedene Strings.

Wie so:

_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 wirkt genau wie TabBarIOS.Item.

onPress funktioniert, aber um die Registerkarte auf ähnliche Weise ändern zu können (indem ich den Status der Komponente ändere) habe ich _changeToAlarms() als Prop an 'SleepSchedules' übergeben.

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

Und von SleepSchedules, ich auf die nächste Komponente bin navigieren und vorbei an den previous'changeToAlarms' als Stütze.

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

Und in ScheduleItem Ich versuche, die Stütze 'changeToAlarm' zu nennen, die übergeben wurde, die die eine von Footer Tabs sein sollte.

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

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

Die Konsolenprotokolle ‚Hallo von ScheduleItem‘ jedes Mal, wenn ich es drücken, aber nicht log ‚Hallo aus FooterTabs‘ auch nicht die Registerkarte ändern.

Hat jemand einen Fehler gefunden?

Ich bin ein Anfänger, also vielen Dank für Ihre Hilfe! :)

Answer 1

Sie brauchen a() nach this.props.changeToAlarms. this.props.changeToAlarms()

Answer 2

Ich denke, es könnte ein besserer Ansatz sein, aber ohne mehr Code sein schwer zu sehen, das vollständige Bild davon zu bekommen, was los ist. Auf etwas, das mir ins Auge fiel, war die _handlePress-Funktion. Sie haben setState und dann eine andere Funktion aufgerufen.

Nach ReactDocs:

Es gibt keine Garantie für einen synchronen Betrieb von Anrufen und fordert Leistungssteigerung kann SetState batched werden.

Dies könnte ein Problem für Sie verursachen, wieder ohne mehr Code ist es schwer zu sagen. Sie können versuchen, die overload method für setState verwenden, die eine Funktion als zweite arg nimmt.

setState (nextstate, callback) Führt eine flache merge von nextstate in aktuellen Zustand. Dies ist die primäre> Methode Sie UI-Updates von Event-Handler und Serveranfrage>> Rückrufe auslösen verwenden.

Das erste Argument kann ein Objekt (die null oder mehr Tasten zu Update) oder eine Funktion (staatlicher und Requisiten) sein, das ein Objekt enthält Schlüssel kehrt zu aktualisieren.

Dies stellt sicher, dass Ihr Setstatus abgeschlossen ist, bevor Ihre nächste Funktion ausgeführt wird.

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