- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
想知道你是否可以帮忙,我在这个问题上遇到了困难......
我在 React 中有一个旅行应用程序,用户可以在其中找到其他在线用户(一旦找到登录用户的纬度和经度)。
定位后,在我的网络应用程序页面上 - 我使用 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 或其他工具访问数据/api 调用。所以我知道 api 正在工作。这是一个例子:
https://api.darksky.net/forecast/MY_API_KEY/50.830133,-0.137434
但是,我试图让我的 Axios 请求在我的 React JSX 中工作的方式有问题。
这是我页面的相关代码,(隐藏了 api key )。
任何帮助都会很棒 - 我不确定为什么我不能将 console.log 天气数据作为起点。
为什么我的 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
}
最佳答案
看起来 API key 和坐标应该是 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'}
})
关于javascript - DarkSky API - 未处理的拒绝错误 - ReactJS/Axios/Node.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50202035/
这是关于非标准属性的。 https://facebook.github.io/react/docs/tags-and-attributes.html 在 react 中我做了这个: React.cr
我制作了 2 个组件:1)内容(使用 fetch() 显示数据)2)分页(共5页,每页16个对象) 我创建了 2 个状态变量,分别称为 start:0 和 end:16。现在,每当用户单击页码时,我都
我们正在使用 ReactJS 创建一个搜索前端。要求是当用户单击文档名称时,该文档必须在嵌入式查看器中打开。有人为此使用过任何 ReactJS 组件吗?否则,我应该使用 JQuery 查看器组件吗?请
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 1 年前。
我现有的项目: 前端框架 - PHP Codeigniter 和 PHP Laravel 后端框架 - JAVA Springboot 我正在尝试将前端框架更改为 ReactJS。我想知道与 Reac
我有一个实现刷新授权 token 的方案。在这种情况下,我为每种操作(发布、获取、删除)实现了一个通用操作,并使用参数调用它们。 export function Get(param) { return
我现在有 { _this.setState({startDate: input})}}/> 无论我一直在改变什么(onChange 部分到 ref 等等),当我 console.log 我的状态时,
我在两个不同的文件中有两个单独的组件 组件A 和 组件B 我在 中有一个按钮组件B 现在我想测试当 中的特定按钮时组件B 被点击,组件A 应呈现如下: import { render, screen,
我有一个包含几个问题的表格。一些问题有一组子问题。 这些是使用以下代码呈现的。 { Object.keys(this.props.moduleDetails.questions).map(
我有两个组件。第一个状态初始化: import React from 'react'; class One extends React.Component { constructor(prop
我的项目是一个对象数组,我只获取名称并在 3 in 3 的屏幕上渲染,使用“下一个”和“上一个”按钮更改名称,并且可以过滤字母。 我想要添加一个新值,在输入中键入并单击按钮添加。 我的代码按钮: ad
我有一个组件实例,应该从不同的地方更新。如何从其他几个组件中更新此组件的 props? class ParentComponent extends React.Component { ...
我想问,是否可以基于变量返回一个组件,我的想法是否可以: var location = this.props.location // Eg. Asia,Australia 我的问题是我需要单独手动导
有没有办法在渲染后立即选择要覆盖的文本?我的意思是选择 - 最佳答案 您可以尝试使用两种方法.focus和.select .focus() method sets focus on the speci
我渲染了以下内容: 这是事件处理程序: handleCompanySubmit(event) { console.log("company submit") e
作为ReactJS的初学者,我现在使用出色的ReactJS Datepicker。有关我的自定义日期格式的问题: 我没有找到任何文档来解释所有可能性,例如M是月份,MM是2个字母的月份,依此类推。(我
我创建了一个表并正在对其进行过滤,但是当我清除搜索查询时,表数据不会显示,并且表会卡在查询结果上。SearchBox 是文本框,TableData 是表格,在 Container 中我正在更改 Sea
我在表格设置中有图标,这样当单击图标时,会呈现不同的图标。现在这工作正常,但我想为我单击的行中的特定行重新呈现不同的图标,而不是在每一行中重新呈现不同的图标。不知道我将如何去做这件事。这是我的代码:
我正在尝试使用 React 构建一个简单的应用程序,它有两个组件,一个嵌入另一个组件。子组件是一个收缩的菜单,单击它时,它会展开。我希望能够在单击父元素或子元素失去焦点时重新收缩它。 这是父组件的样子
我需要知道 REACT JS 或 HTML5 中是否有任何 API 可以提供用户不活动时自动注销的功能。我的代码如下,我不知道出了什么问题,它给了我错误 startTimer 未定义和不必要的绑定(b
我是一名优秀的程序员,十分优秀!