Компонент Grandchild, не изменяющий состояние бабушки и дедушки

Question

В NavigatorIOS есть кнопка с двумя слоями, которые при срабатывании должны изменить выбранный TabBarIOS элемент TabBarIOS.

компоненты структурированы следующим образом:
--FooterTabs
------ NavigatorIOS: Список -> ListItem

Я пытаюсь сделать выше, имея функцию внутри FooterTabs, что изменяет state и имеет TabBar.Items, чья prop 'selected' становится true, когда в 'selectedTab' состояния === различные строки.

Как так:

_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 работает, но для того, чтобы изменить вкладку аналогичным образом (изменив состояние компонента), я передал _changeToAlarms() в качестве опоры для «SleepSchedules».

<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 Я пытаюсь вызвать пропеллер «changeToAlarm», который был принят, который должен быть один из Footer Вкладки.

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

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

на консоли Logs «Привет из ScheduleItem» каждый раз, когда я нажимаю, но не регистрирует «Привет от FooterTabs» и не изменяет вкладку.

Вызывается ошибка?

Я новичок, поэтому большое вам спасибо за вашу помощь! :)

Answer 1

Вам необходимо() после этого.props.changeToAlarms. this.props.changeToAlarms()

Answer 2

Я думаю, что может быть лучший подход, но, не видя больше кода, трудно получить полную картину того, что происходит. На то, что уловило мой взгляд, было в вашей функции _handlePress. Вы вызвали setState, а затем другую функцию.

По ReactDocs:

Там нет никакой гарантии синхронной работы вызовов SetState и вызовы могут группироваться в целях повышения производительности.

Это может быть причиной для вас, опять же без лишнего кода трудно сказать. Вы можете попробовать использовать overload method для setState, который принимает функцию в качестве второго arg.

setState (nextState, callback) Выполняет мелкое слияние nextState в текущее состояние. Это первичный метод, который вы используете для запуска обновлений пользовательского интерфейса из обработчиков событий и запросов сервера>> обратных вызовов.

Первым аргументом может быть объект (содержащий ноль или более ключей для обновления ) или функцию (состояния и реквизита), которая возвращает объект , содержащий ключи для обновления.

Это гарантирует, что ваш setstate будет завершен до выполнения следующей функции.

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