我发现以下错误:

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

这是promise 代码,我看不出有什么问题,有什么 idea 吗?

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

Edit:

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

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

这是索引.网间网操作系统.js代码.url很好,并为我提供了正确的json数据.我可以通过console log看到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);

推荐答案

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

然后在你的课堂上:

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

React-native相关问答推荐

升级到0.74.1后,React Native无法构建ios.ReactCommon模块的重新定义'

类似Snapchat的Reaction Native筛选器

ios 中节列表中的scrollToLocation 不起作用.在 Android 上,列表滚动回索引 0,但在 ios 上不会发生同样的情况

如何在 react-native 中刷新 Flatlist 数据?

如何在react-navigation 中将drawer抽屉放在标题上?

react-native-snap-carousel 无法正确渲染

PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

React Native 上传到 S3 存储空间

如何在 React-Native Android 中检测拖动事件的结束

文本在 android 中被截断以响应本机

使用 resizeMode = contain时的图像对齐

无法在 react native >= 0.60 中链接assets(字体)

props验证中缺少 React Navigation 'navigation'

在 React Native 视图上强制 onLayout

是否可以在 react-native 的构造函数中调用异步函数?

Ipad 上的 React Native - 错误 - could not connect to development server

按钮的标题属性必须是字符串

如何为 TouchableOpacity 组件创建禁用样式?

如何使用 Jest 测试导入自定义原生模块的 React Native 组件?

未找到 React/RCTBridgeDelegate.h' 文件