ReactJS - 使用查询参数获取路由
ReactJS - Fetch Route with Query Parameters
我的 ReactJS 设置遇到问题,我试图在我的 url 中检索查询参数以附加到我的 fetch 函数中调用的 URL 路由。是否有我应该使用的软件包来实现这一目标? cheerio
ReactJS 相关包?有什么方法可以不使用 React 路由器或 Redux 来做到这一点?我正在使用 node-fetch
来调用我的路由。
例如下面是'http://localhost:3000/api?start_date=2017-11-05&end_date=2017-11-21
'
class BlogFeedContainer extends React.Component{
constructor(props, context) {
super(props, context);
this.state = this.context.data || window.__INITIAL_STATE__ || {blogs: []};
}
fetchList() {
fetch('http://localhost:3000/api')
.then(res => {
return res.json();
})
.then(data => {
console.log("API Fetch Data Below");
console.log(data);
this.setState({ blogs: data.blog, user: data.user, csrf: data.csrfToken });
})
.catch(err => {
console.log(err);
});
}
componentDidMount() {
this.fetchList();
}
render() {
return (
<div className="container">
<BlogFeed {...this.state} />
</div>
)
}
};
不需要任何第三方库。只需使用 window.location
对象:
window.location.search // => gives you query strings, starting with `?`
我的 ReactJS 设置遇到问题,我试图在我的 url 中检索查询参数以附加到我的 fetch 函数中调用的 URL 路由。是否有我应该使用的软件包来实现这一目标? cheerio
ReactJS 相关包?有什么方法可以不使用 React 路由器或 Redux 来做到这一点?我正在使用 node-fetch
来调用我的路由。
例如下面是'http://localhost:3000/api?start_date=2017-11-05&end_date=2017-11-21
'
class BlogFeedContainer extends React.Component{
constructor(props, context) {
super(props, context);
this.state = this.context.data || window.__INITIAL_STATE__ || {blogs: []};
}
fetchList() {
fetch('http://localhost:3000/api')
.then(res => {
return res.json();
})
.then(data => {
console.log("API Fetch Data Below");
console.log(data);
this.setState({ blogs: data.blog, user: data.user, csrf: data.csrfToken });
})
.catch(err => {
console.log(err);
});
}
componentDidMount() {
this.fetchList();
}
render() {
return (
<div className="container">
<BlogFeed {...this.state} />
</div>
)
}
};
不需要任何第三方库。只需使用 window.location
对象:
window.location.search // => gives you query strings, starting with `?`