React Native：可能未处理的承诺拒绝

Question

我收到以下错误：

Possible unhandled promise rejection (id:0: Network request failed)

这是承诺代码，我看不出这里有什么问题，有什么想法吗？

  return fetch(url)
    .then(function(response){
      return response.json();
    })
    .then(function(json){
      return {
        city: json.name,
        temperature: kelvinToF(json.main.temp),
        description: _.capitalize(json.weather[0].description)
      }
    })
    .catch(function(error) {
    console.log('There has been a problem with your fetch operation: ' + error.message);
    });
}

编辑：

我添加了一个catch函数，得到了更好的错误：

You passed an undefined or null state object; instead, use forceUpdate(). index.ios.js:64 undefined

这是 index.ios.js 代码。该网址很好，并为我提供了正确的 json 数据。我可以通过控制台日志看到

region.latitude

和

region.longitude

在

Api(region.latitude, region.longitude)

中都可用。但是

data

是未定义的。

我仍然不确定这是怎么回事，为什么

data

有问题，为什么它是未定义的。

// var React = require('react-native'); --deprecated

// updated
import React from 'react';

// updated
import {
  AppRegistry,
  MapView,
  View,
  Text,
  StyleSheet,
} from 'react-native';

/*
var {
  AppRegistry,
  MapView,
  View,
  Text,
  StyleSheet
} = React;
*/ // -- depreciated 


var Api = require('./src/api');

var Weather = React.createClass({
  getInitialState: function() {
    return {
      pin: {
        latitude: 0,
        longitude: 0
      },
      city: '',
      temperature: '',
      description: ''
    };
  },
  render: function() {
    return <View style={styles.container}>
      <MapView
        annotations={[this.state.pin]}
        onRegionChangeComplete={this.onRegionChangeComplete}
        style={styles.map}>
      </MapView>
      <View style={styles.textWrapper}>
        <Text style={styles.text}>{this.state.city}</Text>
        <Text style={styles.text}>{this.state.temperature}</Text>
        <Text style={styles.text}>{this.state.description}</Text>
      </View>
    </View>
  },
  onRegionChangeComplete: function(region) {
    this.setState({
      pin: {
        longitude: region.longitude,
        latitude: region.latitude
      }
    });

    Api(region.latitude, region.longitude)
      .then((data) => {
        console.log(data);
        this.setState(data);
      });
  }
});


        

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF'
  },
  map: {
    flex: 2,
    marginTop: 30
  },
  textWrapper: {
    flex: 1,
    alignItems: 'center'
  },
  text: {
    fontSize: 30
  }
});

AppRegistry.registerComponent('weather', () => Weather);

Answer 1

您的 api 中的 catch 函数应该返回一些可以由 React 类中的 Api 调用处理的数据，或者抛出应该使用您的 React 类代码中的 catch 函数捕获的新错误。后一种方法应该是这样的：

return fetch(url)
.then(function(response){
  return response.json();
})
.then(function(json){
  return {
    city: json.name,
    temperature: kelvinToF(json.main.temp),
    description: _.capitalize(json.weather[0].description)
  }
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
 // ADD THIS THROW error
  throw error;
});

然后在你的 React 类中：

Api(region.latitude, region.longitude)
  .then((data) => {
    console.log(data);
    this.setState(data);
  }).catch((error)=>{
     console.log("Api call error");
     alert(error.message);
  });

Answer 2

您应该将 catch() 添加到 Api 调用的末尾。当您的代码命中 catch() 时，它不会返回任何内容，因此当您尝试对其使用 setState() 时，数据是未定义的。错误消息实际上也告诉你这一点:)

Answer 3

根据这篇文章，您应该在 XCode 中启用它。

1. 在项目导航器中单击您的项目
2. 打开信息标签
3. 点击左下角的“App Transport Security Settings”
4. 右键点击“App Transport Security Settings”并选择Add Row
5. 对于创建的行，设置键“允许任意加载”，类型为布尔值，值为 YES。

Answer 4

在这里添加我的经验，希望对某人有所帮助。

我在使用热重载的 Linux 中的 Android 模拟器上遇到了同样的问题。根据接受的答案，代码是正确的，模拟器可以访问互联网（我需要一个域名）。

手动刷新应用程序使其工作。所以也许这与热重载有关。

Answer 5

就我而言，我在 IP 中运行本地 Django 后端

127.0.0.1:8000

随着世博会的开始。 只要确保您的服务器位于

public domain

中，而不是本地托管在您的机器上。 如果它在本地托管，请找到本地 IP 地址，如

192.168.0.105

或其他东西并使用它

Answer 6

对于我在 catch 中添加 return error 的作品，也许你可以试试看：

.catch(e => {
    console.error(e)
    return e;
})

Answer 7

删除构建文件夹

projectfile\android\app\build

并运行项目