React Native + TypeScript，无法设置状态答案

【问题标题】：React Native + TypeScript, can't set StateReact Native + TypeScript，无法设置状态
【发布时间】：2016-12-24 21:30:33
【问题描述】：

我知道我的功能正在运行，但由于某种原因我无法设置此属性“isLoggedIn”的状态

在 componentDidMount() 中，我根据登录检测设置状态，它似乎不起作用。

import React, {
   Component
} from 'react';
import { AppRegistry, View, StyleSheet, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

import Firestack from 'react-native-firestack';

const firestack = new Firestack();

interface Props {
   isLoggedIn?: boolean;
}

interface State {
   isLoggedIn: boolean;
}


export default class MainList extends Component<Props, State> {

    state = {
      isLoggedIn: false,
    };

    constructor(props: any) {

       super(props);
       console.log("Is anyone logged in?: " + this.isLoggedIn);

    }

    isLoggedIn = this.state.isLoggedIn;

    componentDidMount() {

      firestack.auth.listenForAuth((evt: any) => {
      // evt is the authentication event
      // it contains an `error` key for carrying the
      // error message in case of an error
      // and a `user` key upon successful authentication

        if (!evt.authenticated) {
        // There was an error or there is no user
        //console.error(evt.error);

        this.setState({isLoggedIn: false});
        console.log("The state of isLoggedIn is: " + this.isLoggedIn);

        } else {
        // evt.user contains the user details
        console.log('User details', evt.user);

        this.setState({isLoggedIn: true});
        console.log("The state of isLoggedIn is: " + this.isLoggedIn);

        }

        if (!this.isLoggedIn) {

            Actions.welcome();

        }


    }); 

}

render() {

    return (
        <View style={styles.View}>

            <Text style={styles.textLabel}>The main view</Text>

        </View>
       )

     }

  }

const styles = StyleSheet.create({

    View: {
       padding: 20
    },
   textLabel: {
    fontSize: 20,
    marginBottom: 10,
    height: 20
  },
textInput: {
    height: 20,
    fontSize: 15,
    marginBottom: 20
}

 });

 AppRegistry.registerComponent('MainList', ()=> MainList);

我做错了什么？

【问题讨论】：

你不能在 componentDidMount() 中设置状态

标签： reactjs typescript react-native typescript2.0

【解决方案1】：

    this.setState({isLoggedIn: false});
    console.log("The state of isLoggedIn is: " + this.isLoggedIn);

此代码不起作用。 setState 是异步的，所以this.isLoggedIn 不一定会在你调用setState 后立即更新。如果要立即访问新值，请使用设置状态时触发的回调：

this.setState({ isLoggedIn: false }, () => console.log(this.state.isLoggedIn));

或者，使用这种设置状态的方法：

this.setState(oldState => {
    oldState.isLoggedIn = false;

    console.log(oldState.isLoggedIn);
    return oldState;
});

【讨论】：

谢谢，我没想到它是异步的……很高兴知道那里。现在解决了我的问题 :-) 谢谢！

【解决方案2】：

在 componentDidMount 中获取数据。当响应到达时，通过在回调中调用 setstate 将数据存储在 state 中。

componentDidMount() 在组件安装后立即调用。需要 DOM 节点的初始化应该放在这里。如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

【讨论】：