undefined 不是带 fetch 的对象（正在评估 'this.props.navigation'）

Question

我尽力用 React native 制作一个登录表单，但是 :

我无法重定向到 'App'，错误消息是：(TypeError: undefined is not an object (evaluating 'this.props.navigation')])

try {
  fetch('http://93.xxx.xx.xx:5151/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
      body: formBody,
    })
    .then(function(response) {
      if (response.ok) {
        this.props.navigation.navigate('App');
      } else {
        throw new Error("Failed to fetch [error : " + response.status + "]");
        Alert.alert("Error [" + response.status + "] - " + response.statusText);
      }
    })
    .then(function(response) {
      if (response.ok) {
        Alert.alert(response.userToken);
        console.log(response);
      } else {
        Alert.alert("Error [" + response.status + "] - " + response.statusText);
      }
    })
} catch (error) {
  if (error) {
    console.error(error);
  }
}

有人知道怎么做吗？

到目前为止我只有一个解决方案：

fetch('http://93.xxx.xx.xx:5151/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body: formBody
  })
  .then(res => {
    if (res.ok) {
      this.props.navigation.navigate('App')
    } else {
      if (res.status == 400) {
        Alert.alert("Error 400 : login rejected because -> " + res.message)
      } else {
        throw Error(`Request rejected with status ${res.status}`);
      }
    }
  })
  .catch(console.error)
}

但是对于这个解决方案，我不知道如何保存用户令牌...

Answer 1

这是一个范围界定问题，更改它：

.then(function(response) { // due to this you are losing `this` scope inside it

// due to that, this is not accessible, in result you will get error
this.props.navigation.navigate('App');

收件人：

.then((response) => { // <--- Fat arrow is what you need

Answer 2

第一个是范围问题。如果你想在匿名函数中使用 "this"，你需要将它绑定到你的对象。有两种方法可以做到这一点：

1) 如果你使用旧的函数风格，以前的对象不会自动绑定到它。因此您需要手动绑定父对象。如果你想要更多的解释，请看这里：What is the use of the JavaScript 'bind' method?

Promise.then(function(res) {
    return "Your return"
}.bind(this));

2) 第二种方式是使用ES6 "Fat arrow"-Function。这在内部有点不同，直接绑定父对象的内容。

Promise.then(res => "Your return");

关于你的第二个问题，我不完全明白你的目标是什么。您要在下一条路线中使用用户令牌吗？如果是这样，您应该使用 "setParams":

fetch('http://93.xxx.xx.xx:5151/login', { 
 method: 'POST', 
 headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}, 
 body: formBody 
})
.then(res => {
 if(res.ok) {
  this.props.setParams({
    token: res.userToken
  })
  this.props.navigation.navigate('App')
 } else {
  if (res.status == 400) {
    Alert.alert("Error 400 : login rejected because -> " + res.message)
  } else {
    throw Error(`Request rejected with status ${res.status}`);
  }
}})
.catch(console.error)
}}

undefined 不是带 fetch 的对象（正在评估 'this.props.navigation'）

undefined is not an object (evaluating 'this.props.navigation') with fetch

javascript

forms

navigation

fetch

react-native