undefined 不是带有 fetch 的对象（评估“this.props.navigation”）答案

【问题标题】：undefined is not an object (evaluating 'this.props.navigation') with fetchundefined 不是带有 fetch 的对象（评估“this.props.navigation”）
【发布时间】：2020-05-14 09:17:51
【问题描述】：

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

我无法重定向到 'App'，错误消息是：(TypeError: undefined is not an object (evalating '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)
}

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

【问题讨论】：

标签： javascript forms react-native navigation fetch

【解决方案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

【讨论】：

感谢您，我的重定向现在工作得很好，但是在第二个内部。然后我的“if (response.ok)”不再工作了......我有这个错误：未定义不是一个对象（评估“response.ok”）
@Xodarap，那是因为你没有从第一个返回任何东西 .then ，return response 在第一个 .then 然后你会得到第二个里面的值

【解决方案2】：

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

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

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

2) 第二种方式是使用ES6的“胖箭头”-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)
}}

【讨论】：