React原生:可能未处理的承诺拒绝

k5ifujac  于 2023-03-19  发布在  React
关注(0)|答案(7)|浏览(206)

我收到以下错误:
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代码。url很好,给了我正确的json数据。我可以通过控制台日志看到region.latituderegion.longitudeApi(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);
ljsrvy3e

ljsrvy3e1#

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

n8ghc7c12#

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

dluptydi

dluptydi3#

根据this post,您应该在XCode中启用它。
1.在项目导航器中单击您的项目
1.打开信息选项卡
1.单击“应用程序传输安全设置”左侧的向下箭头
1.右键单击“应用程序传输安全设置”并选择“添加行
1.对于已创建的行,设置键“允许任意加载”,键入布尔值并将值设置为YES。

pcww981p

pcww981p4#

加上我的经验,希望能帮助到别人。
我在Linux中的Android模拟器上也遇到了同样的问题,需要热重载。根据接受的答案,代码是正确的,模拟器可以访问互联网(我需要一个域名)。
手动刷新应用程序使它工作。所以也许这与热重新加载有关。

8yparm6h

8yparm6h5#

在我的例子中,我运行的是一个本地Django后端,IP地址为127.0.0.1:8000,Expo启动。只要确保你的服务器在public domain中,而不是在你的机器上本地托管。如果它是本地托管的,找到本地IP地址,如192.168.0.105或其他地址,并使用它

raogr8fs

raogr8fs6#

对于我在catch工作中添加返回错误,也许您可以给予一下:

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

pxy2qtax7#

删除构建文件夹projectfile\android\app\build并运行项目

相关问题