Question

想知道你是否可以提供帮助，我很喜欢这个......

我在React有一个旅行应用程序，用户可以在线找到其他用户（一旦找到已登录的用户lat和lng）。

找到后，在我的网页应用页面上 - 我使用lng / lng，浏览Zomato api本地信息/餐馆。这曾经工作，但现在我在我的控制台中收到以下错误...（这曾经工作，但代码没有改变......）

我正在尝试使用DarkSky api进行同样的操作，以获取当地的天气数据。而且我的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 ()

当我手动插入lat lng时，我可以通过Invision或其他工具访问data / api调用。所以我知道api正在运行。这是一个例子：

https://api.darksky.net/forecast/MY_API_KEY/50.830133,-0.137434

但是，我试图让我的Axios请求在我的反应JSX中运行时出现了问题。

这是我的页面的相关代码，（隐藏了api键）。

任何帮助都会很棒 - 我不知道为什么我不能安装console.log天气数据作为起点。

为什么我的zomato数据没有根据用户的lat lng坐标进行更改。

"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
 }

Answer 1

看起来API密钥和坐标应为part of the path。尝试：

  weather: axios({
    url: `https://api.darksky.net/forecast/${MY_API_KEY}/${params.lat},${params.lng}`, // add api key to the path
    json: true,
    method: 'GET',
    headers: {'user-key': 'MY_API_KEY'}
  })

DarkSky API - 未处理的拒绝错误 - ReactJS / Axios / Node.js

1 个答案: