Response-native this.setState не работает

Я знаю, что уже есть аналогичный вопрос, но там нет кода.

В navbarChanged() > если условие, я делаю this.setState. Это тип HomeTab, но setState, похоже, не работает.

Любые подсказки/указатели?

class HomeTab extends React.Component {
  constructor() {
    super()

    this.setState({
      isNavBarHidden: false
    });
  }

  updatePosition(lastPosition) {
  }

  navbarChanged() {
    console.log("received navbar changed event", AppStore.navbarVisible());

    if (AppStore.navbarVisible()) {
      StatusBarIOS.setHidden(false)
      this.setState({ isNavBarHidden: false})
      // this.state.isNavbarHidden is still true here
      this.render();
    }
    else {
      StatusBarIOS.setHidden(true);
      this.setState({ isNavBarHidden: true});
      this.render();
    }
  }

  componentDidMount() {
    AppStore.addNavbarChangeListener( this.navbarChanged.bind(this) );
  }

  componentWillMount() {
    StatusBarIOS.setHidden(false)
    this.setState({ isNavBarHidden: false });
  }
}

И вот мой код render():

  render() {
    return (
        <NavigatorIOS style={styles.container}
            navigationBarHidden={this.state.isNavBarHidden}
            ref="navigator"
            initialRoute={{
              title: 'Foo',
              component: HomeScreen,
              passProps: { parent: this }
            }}
        />
    )
  }

Ответ 1

Не вызывайте явно render. React автоматически выполнит повторную визуализацию при изменении состояния или реквизита, поэтому нет необходимости в этом. Кроме того, где ваш фактический метод render?

Что касается вашей проблемы, setState является асинхронным и поэтому пытается работать с состоянием непосредственно после того, как вызов setState не будет работать, поскольку обновление не обязательно будет запущено. Вместо этого вы можете использовать второй аргумент setState, который является обратным вызовом:

this.setState({ myVal: 'newVal'}, function() {
    // do something with new state
});

Это будет инициировано после того, как состояние будет установлено и после повторной обработки компонента.

Ответ 2

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

  constructor() {
    super()

    this.state = {
      isNavBarHidden: false
    };
  }

Ответ 3

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

componentWillReceiveProps(nextProps,nextState){
  if(this.state.myVar === nextState.myVar){
    return;
  }
  // TODO perform changes on state change
}

Я думаю, что это более оптимально, чем решение, указанное выше в Colin Ramsay, поскольку все вышеприведенные логики будут выполняться до вызова render.