Question

我知道已经有类似的问题，但那里没有共享代码。

在navbarChanged()＆gt;下如果条件，我正在做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 }
            }}
        />
    )
  }

Answer 1

不要明确调用render。当状态或道具发生变化时，React会自动重新渲染，因此不需要这样做。另外，您的实际render方法在哪里？

至于你的问题，setState是异步的，因此在setState调用后尝试直接使用状态将不起作用，因为更新不一定会运行。相反，你可以使用setState的第二个参数，这是一个回调：

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

在设置状态和重新渲染组件之后将触发此操作。

Answer 2

使用state作为es6类的实例成员，而不是setState。函数setState可以稍后调用，以确保必要的重新渲染。

  constructor() {
    super()

    this.state = {
      isNavBarHidden: false
    };
  }

Answer 3

您还可以更新eventHandlers中的状态，并收听componentWillReceiveProps以获取状态更改后需要运行的代码。

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

我认为它比上面Colin Ramsay给出的解决方案更优化，因为所有上述逻辑都会在调用render之前运行。

react-native this.setState无法正常工作

3 个答案: