undefined不是一个对象(评估'this.props.navigation')与fetch

Question

我尽力使用 React 原生制作登录表单，但是：

• 我无法重定向到"应用程序"，错误消息是：(类型错误：未定义不是一个对象(评估"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(如果使用旧的函数样式，则前一个对象不会自动绑定到它。因此，您需要手动绑定父对象。 如果你想得到更多的解释，请看这里：JavaScript 'bind' 方法有什么用？

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

2(第二种方法是使用ES6"胖箭头"功能。这在内部的工作方式略有不同，并直接绑定父 Obejct 的内容。

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