Question

我刚开始使用React Native并尝试从Promise回调中导航时遇到以下问题。

这是我尝试运行的以下代码。如果http请求返回用户的登录信息正确，我想导航到另一个屏幕。

login() {
  axios({
      method: 'post',
      url: `${Globals.WebAPI}/api/authentication/login`,
      data: {
        username: this.state.username,
        password: this.state.password
      }
  })
  .then(function(response) { 
      console.log(response.data.token)
      AsyncStorage.setItem("AuthToken", response.data.token);
      this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
  })
  .catch(function(error) {
      console.log(error);
  });
}



render() {
return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      title="Go to Details"
      onPress={this.goToDetails}
    />
    <Button
      title="Signup"
      onPress={this.goToSignup}
    />
    <Text>Username</Text>
    <TextInput
    style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({username: text})}
    value={this.state.username}
  />
  <Text>Password</Text>
  <TextInput
    style={{height: 40, width: 200, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({password: text})}
    value={this.state.password}
  />
  <Button
      title="Login"
      onPress={this.login}
    />
  </View>
)};

这是我从此函数中得到的错误：

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

我觉得这个错误是由于我不完全了解道具的用法而引起的，所以我希望这个答案有助于巩固我对React Native发生的情况的了解。

预先感谢

Answer 1

这部分失去了this的约束力：

  .then(function(response) { 
      console.log(response.data.token)
      AsyncStorage.setItem("AuthToken", response.data.token);
      this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
  })

因此，当您呼叫this.props.navigation.navigate(时，this是undefined，这就是您的错误告诉您的信息。

最简单的解决方法是将常规函数转换为箭头函数，该函数将this绑定到周围上下文的this值。

  .then((response) => { 
      console.log(response.data.token)
      AsyncStorage.setItem("AuthToken", response.data.token);
      this.props.navigation.navigate('PictureDetails', {base64: photo.base64});
  })

更多信息here

Answer 2

我想您没有使用react-navigation库创建Navigation对象。我需要查看这段代码的整个文件，以确保原因是什么。

从Promise回调中导航

2 个答案: