次のエラーが発生します:
未処理のプロミス拒否の可能性があります (id:0: ネットワーク要求が失敗しました)`
ここに Promise コードがあります。何が間違っているのか分かりません。何かアイデアはありますか?
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
と、より具体的なエラーが発生しました:
未定義または null の状態オブジェクトを渡しました。代わりに forceUpdate() を使用してください。index.ios.js:64 undefined
region.latitude
これが index.ios.js コードです。URL は問題なく、正しい json データを提供します。コンソール ログを見ると、 と の両方が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);
ベストアンサー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);
});