Интересно, если вы можете помочь, я нахожусь в тупике на этом ...
У меня есть приложение для путешествий в React, где пользователи могут найти других пользователей в Интернете (после того, как вошли пользователи lat и lng).
Находясь на странице моего веб-приложения, я использую lng / lng, чтобы просмотреть информацию о местных ресторанах и ресторанах Zomato api. Раньше это работало, но теперь я получаю следующую ошибку в моей консоли ... (Это работало, но код не изменился ...)
Я пытаюсь сделать то же самое с API DarkSky, чтобы просмотреть местные данные о погоде. И я структурировал свой запрос axios точно так же. Однако это тоже не работает.
Failed to load resource: the server responded with a status of 400 ()
app.js:55642 Unhandled rejection Error: Request failed with status code
400
at createError (http://localhost:8000/app.js:9175:15)
at settle (http://localhost:8000/app.js:53028:12)
at XMLHttpRequest.handleLoad (http://localhost:8000/app.js:9048:7)
From previous event:
at Hub._this.getPlaces (http://localhost:8000/app.js:53788:26)
at commitCallbacks (http://localhost:8000/app.js:38450:15)
at commitLifeCycles (http://localhost:8000/app.js:41688:13)
at commitAllLifeCycles (http://localhost:8000/app.js:43345:9)
at HTMLUnknownElement.callCallback
(http://localhost:8000/app.js:32010:14)
at Object.invokeGuardedCallbackDev
(http://localhost:8000/app.js:32048:16)
at invokeGuardedCallback (http://localhost:8000/app.js:32097:29)
at commitRoot (http://localhost:8000/app.js:43484:9)
at completeRoot (http://localhost:8000/app.js:44381:36)
at performWorkOnRoot (http://localhost:8000/app.js:44331:11)
at performWork (http://localhost:8000/app.js:44249:9)
at performSyncWork (http://localhost:8000/app.js:44226:5)
at requestWork (http://localhost:8000/app.js:44126:7)
at scheduleWorkImpl (http://localhost:8000/app.js:44001:13)
printWarning @ app.js:55642
formatAndLogError @ app.js:55358
fireRejectionEvent @ app.js:55383
Promise._notifyUnhandledRejection @ app.js:54829
(anonymous) @ app.js:54808
setTimeout (async)
Promise._ensurePossibleRejectionHandled @ app.js:54807
Promise._reject @ app.js:57521
Promise._settlePromise @ app.js:57447
Promise._settlePromise0 @ app.js:57477
Promise._settlePromises @ app.js:57552
(anonymous) @ app.js:54272
Promise.then (async)
schedule @ app.js:58581
Async.settlePromises @ app.js:54271
Promise._reject @ app.js:57519
Promise._rejectCallback @ app.js:57337
PromiseArray._reject @ app.js:57777
PromiseArray._promiseRejected @ app.js:57797
Promise._settlePromise @ app.js:57439
Promise._settlePromise0 @ app.js:57477
Promise._settlePromises @ app.js:57552
(anonymous) @ app.js:54272
Promise.then (async)
schedule @ app.js:58581
Async.settlePromises @ app.js:54271
Promise._reject @ app.js:57519
Promise._rejectCallback @ app.js:57337
reject @ app.js:59005
geocode:1 Failed to load resource: the server responded with a status
of 404 ()
Я могу получить доступ к вызову data / api через Invision или другие инструменты, когда я подключаю широту вручную. Так что я знаю, что API работает. Вот пример:
https://api.darksky.net/forecast/MY_API_KEY/50.830133,-0.137434
Однако что-то не так в том, как я пытаюсь заставить мой запрос Axios работать в моем реагирующем JSX.
Вот соответствующий код моей страницы (ключи api скрыты).
Любая помощь была бы отличной - я не уверен, почему я не могу утешить. Записать данные о погоде в качестве отправной точки.
И почему мои данные zomato не меняются, основываясь на широтных координатах пользователей.
"class Hub extends React.Component {
state = {
places: null,
articles: null,
user: null,
lat: null,
lng: null,
weather: null
}
setLocation = (lat, lng) => {
console.log('location set...', lat, lng);
this.setState({ lat: lat, lng: lng }, this.getPlaces);
}
getWeather = () => {
const params = {lat: this.state.lat, lng: this.state.lng};
//restaurants
Promise.props({
weather: axios({
url: 'https://api.darksky.net/forecast',
params: params,
json: true,
method: 'GET',
headers: {'user-key': 'MY_API_KEY'}
}).then(res => console.log(res.data))
.catch(err => console.log(err))
})
.then(data => {
this.setState({
weather: data.weather
});
});
}
getPlaces = () => {
const params = { count: 3, lat: 34.019864, lon: -118.490541 };
if(this.state.lat && this.state.lng) {
Object.assign(params, { lat: this.state.lat, lon: this.state.lng });
}
//restaurants
Promise.props({
restaurants: axios({
url: 'https://developers.zomato.com/api/v2.1/geocode',
params: params,
json: true,
method: 'GET',
headers: {'user-key': 'MY_API_KEY'}
}).then(res => res.data),
articles: axios({
url: 'https://developers.zomato.com/api/v2.1/collections',
params: params,
json: true,
method: 'GET',
headers: {'user-key': 'MY_API_KEY'}
}).then(res => res.data)
})
.then(data => {
this.setState({
places: data.restaurants.nearby_restaurants.slice(0, 6),
articles: data.articles.collections
});
});
}
componentDidMount() {
this.getPlaces();
this.getWeather();
}
render() {
etc etc etc
}