React-native 找不到变量 简单js学习

Question

根据教程和 react 文档设置简单的令牌登录后，react-native 显示找不到变量：isLogged 我尝试将 getToken 传递给 isLogged var，但显示此 Can't find variable 错误。

对不起，因为我正在尝试学习 js 和一般的反应。

在这种情况下，如果令牌存在，则将用户重定向到主页，否则重定向到登录。 那么，任何人都可以提供有关如何在这种情况下将变量作为函数传递的提示吗？

代码如下：

import React, { Component } from 'react';

import { AsyncStorage } from 'react-native';

import { NativeRouter, Route, Link, Redirect, withRouter } from 'react-router-native'

import Login from './pages/Login';
const AUTH_TOKEN = 'auth_token';
const isLogged = getToken();

class App extends Component {

    componentWillMount() {
        this.getToken();

    }

    async getToken() {
        try {
            let authToken = await AsyncStorage.getItem(AUTH_TOKEN);
            if (!authToken) {
                console.log("Token not set");
            } else {
                this.verifyToken(authToken)
            }
        } catch (error) {
            console.log("Something went wrong");
        }
    }


  async verifyToken(token) {
    let authToken = token

    try {
      let response = await fetch('https://lpfoot.herokuapp.com/api/verify?session%5Bauth_token%5D='+authToken);
      let res = await response.text();
      if (response.status >= 200 && response.status < 300) {
        //Verified token means user is logged in.

      } else {
          //Handle error
          let error = res;
          throw error;
      }
    } catch(error) {
        console.log("error response: " + error);
    }
  }


render() {
    if (isLogged) {
        return this.props.history.push('./pages/Home');
    } else {
        return this.props.history.push('./pages/Login');
    }


}
}



export default App;

Answer 1

您的代码中有几处有问题：
试图在定义它的范围之外调用方法getToken，这里是类App。 more about scope.
第二件事：render 方法在类被实例化时调用一次，然后如果类的 prop 或 local state 发生变化。在您的情况下，更改isLogged 的值不会触发渲染方法，因为isLogged 不是this.props 的一部分或this.state 的一部分

使用react 可以做到这一点的一种方法是：

import React, { Component } from 'react';

import { AsyncStorage } from 'react-native';

import { NativeRouter, Route, Link, Redirect, withRouter } from 'react-router-native'

import Login from './pages/Login';
const AUTH_TOKEN = 'auth_token';

class App extends Component {

    state = {
      isLogged:false
    }

    componentDidMount() {
      this.getToken();
    }

    async getToken() {
        try {
            let authToken = await AsyncStorage.getItem(AUTH_TOKEN);
            if (!authToken) {
                console.log("Token not set");
            } else {
                this.verifyToken(authToken)
            }
        } catch (error) {
            console.log("Something went wrong");
        }
    }

  async verifyToken(token) {
    let authToken = token

    try {
      let response = await fetch('https://lpfoot.herokuapp.com/api/verify?session%5Bauth_token%5D='+authToken);
      let res = await response.text();
      if (response.status >= 200 && response.status < 300) {
        //Verified token means user is logged in.

        this.setState({ isLogged: true });

      } else {
          //Handle error
          let error = res;
          throw error;
      }
    } catch(error) {
        console.log("error response: " + error);
    }
  }


render() {
    if (this.state.isLogged) {
        return this.props.history.push('./pages/Home');
    } else {
        return this.props.history.push('./pages/Login');
    }
  }
}

export default App;

有几件事：
关于react local state:
- state vs props
- a good article about understanding setState .
- 避免使用componentWillMount，而是使用componentDidMount more info

每次更改状态的道具或值时都会调用渲染，在您的情况下，我猜您会在渲染函数中推送到历史记录时遇到问题。 我还没有测试过，但我会做这样的事情：

在async verifyToken(token)内

 async verifyToken(token) {
    let authToken = token

    try {
      let response = await fetch('https://lpfoot.herokuapp.com/api/verify?session%5Bauth_token%5D='+authToken);
      let res = await response.text();
      if (response.status >= 200 && response.status < 300) {
        //Verified token means user is logged in.

        this.props.history.push('./pages/Home');

      } else {
          //Handle error
          let error = res;
          throw error;
      }
    } catch(error) {
        console.log("error response: " + error);
    }
  }

render 方法内部

render() {
  <Login />
}