Question

我知道我的功能正在运行但无论出于何种原因我都无法设置此属性的状态“isLoggedIn”

在componentDidMount（）中，我基于登录检测设置了setState，它似乎不起作用。

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

我做错了什么？

Answer 1

private void AlterRow(DataGridRowEventArgs e)
{
    var cell = GetCell(dataGrid, e.Row, 0);
    if (cell == null) return;

    var item = e.Row.Item as Ro;
    if (item == null) return;

    cell.Background = item.c1Color;

    cell = GetCell(dataGrid, e.Row, 1);
    if (cell == null) return;

    cell.Background = item.c2Color;
}

public static T GetVisualChild<T>(Visual parent) where T : Visual
{
    T child = default(T);
    int numVisuals = VisualTreeHelper.GetChildrenCount(parent);
    for (int i = 0; i < numVisuals; i++)
    {
        var v = (Visual)VisualTreeHelper.GetChild(parent, i);
        child = v as T ?? GetVisualChild<T>(v);
        if (child != null)
        {
            break;
        }
    }
    return child;
}


public static DataGridCell GetCell(DataGrid host, DataGridRow row, int columnIndex)
{
    if (row == null) return null;

    var presenter = GetVisualChild<DataGridCellsPresenter>(row);
    if (presenter == null) return null;

    // try to get the cell but it may possibly be virtualized
    var cell = (DataGridCell)presenter.ItemContainerGenerator.ContainerFromIndex(columnIndex);
    if (cell == null)
    {
        // now try to bring into view and retreive the cell
        host.ScrollIntoView(row, host.Columns[columnIndex]);
        cell = (DataGridCell)presenter.ItemContainerGenerator.ContainerFromIndex(columnIndex);
    }
    return cell;
}

此代码无效。 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));

Answer 2

获取componentDidMount中的数据。当响应到达时，通过在回调内调用setstate来存储数据状态。

装载组件后立即调用

componentDidMount（）。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态将触发重新渲染。

React Native + TypeScript，不能设置State

2 个答案: