reactjs - single - react-nativo this.setState no funciona

setstate array react

Question

Sé que ya hay una pregunta similar pero no hay código compartido allí.

Bajo navbarChanged() > si la condición, estoy haciendo un this.setState . Esto es de tipo HomeTab pero setState no parece estar funcionando.

¿Alguna pista / puntero?

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

Y aquí está mi código de render ():

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

Answer 1

En lugar de setState, use el estado como un miembro de instancia de la clase es6. La función setState se puede llamar más tarde para asegurar las repeticiones necesarias.

  constructor() {
    super()

    this.state = {
      isNavBarHidden: false
    };
  }

Answer 2

No llames explícitamente a render . React hará automáticamente una nueva representación cuando cambie el estado o las propiedades, por lo que no hay necesidad de esto. Además, ¿dónde está su método de render real?

En cuanto a su problema, setState es asíncrono y, por lo tanto, tratar de trabajar con el estado directamente después de una llamada setState no funcionará, ya que la actualización no necesariamente se ejecutará. En su lugar, puede utilizar el segundo argumento para setState que es una devolución de llamada:

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

Esto se activará después de que se haya establecido el estado y después de que el componente se haya vuelto a representar.

Answer 3

También puede actualizar el estado en los EventHandlers y escuchar componentWillReceiveProps para el código que necesita ejecutar después de que cambie el estado.

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

Creo que es más óptima que la solución dada por Colin Ramsay arriba, ya que toda la lógica anterior se ejecutaría antes de render se llame al render .