Question

根据教程和react docs设置一个简单的令牌登录后，react-native会显示Ca n't find variable：isLogged 我试图将getToken传递给isLogged var，但显示此“找不到变量错误”。

抱歉，我正在尝试学习js和一般的反应。

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

代码如下：

onClickListener

Answer 1

您的代码中有几处错误：
尝试在定义的范围（此处为App类）之外调用方法getToken。 more about scope。
第二件事：实例化类后，render方法被调用一次，然后如果类的prop或local state发生更改，则调用一次。对于您而言，更改isLogged的值不会触发render方法，因为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

每当一个prop或状态值改变时，也会调用一次render，我想在您的情况下，通过在render函数中推送历史记录会遇到问题。我还没有测试过，但是我会做这样的事情：

在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 />
}

React-native无法找到简单的js学习变量

1 个答案: