我获取数据的方式有问题吗?
[英] Something wrong with my way to fetch data?
本文介绍了我获取数据的方式有问题吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在客户端使用 react 和 redux 构建 CRUD 应用程序，但我在这个问题上困了几个星期.
我有两个主要组件:一个用于文章列表，另一个用于文章.
class Category1 扩展 React.Component {componentDidMount(){this.props.fetchArticles();}使成为() {返回 (<div>{this.props.children ||<div className="mainContent"><h1>类别1</h1><小时/><ListContainer 文章={this.props.articles}/> }
);}}
在 ListContainer 中，我在列表上迭代数据并使用
导出默认类 ListContainer extends React.Component {渲染项目(文章){返回 (<Link to={"/articles/" + article.id} key={article.id} ><ItemContainer article={article}/></链接>)}使成为(){<div className="row"><div className="col-lg-8 col-md-8 col-sm8">{this.props.articles.map(this.renderItem.bind(this))}
}}
当我单击列表中的一篇文章时，它会将我带到一个文章页面，该页面也使用 componentDidMount 来检索其文章的数据.
class ArticlePage 扩展 React.Component {componentDidMount(){this.props.fetchArticle(this.props.params.id);}使成为() {返回 (<div className="row"><div className="col-lg-6 col-md-6 col-sm6"><div className="文章内容"><h2>{this.props.article.title}</h2><div className="文章正文"><p>{this.props.article.image}</p><p>by {this.props.article.name}</p>
);}}
我的问题是，一旦我访问了文章页面，我就无法返回上一页或从中转到其他页面.即使路径会改变，它也保持在同一页面中，并且我收到一个控制台错误，说this.props.articles.map 不是一个函数"，而 ArticlePage 没有.我确信它的错误来自 ListContainer.此外，当我重新加载 ArticlePage 时，它的组件会消失而不会出现任何错误.
这是我的路线:
<IndexRoute 组件={Home}/><Route path="login" component={LoginPage}/><Route path="signup" component={SignupPage}/><Route path="submit" component={auth(SubmitPage)}/><Route path="category1" 组件={Category1}><Route path="articles/:id" component={ArticlePage}/></路线><Route path="category2" component={Category2}><Route path="articles/:id" component={ArticlePage}/></路线></路线> 我该如何解决这个问题?
解决方案
不确定你是如何设置路由的，但这应该会让你开始使用 react-router
首先，您应该在设置应用程序的地方设置路由.
您的 index.js 或根页面.
import { Router, Route, Link, browserHistory } from 'react-router'/* 导入 */使成为((<路由器历史={browserHistory}><Route path="/articles" component={Politics}><Route path="/article/:id" component={ArticlePage}/></路线></路由器>), document.getElementById('root'))然后在您的 ListContainer 组件中创建指向文章的链接.
你的 list-container.js
导出默认类 ListContainer extends React.Component {渲染项目(文章){返回 (<链接到={"/articles/" + article.id}><ItemContainer article={article}/>//<- ??//不确定这部分，因为你不知道//在您的问题中指定了 ItemContainer.//假设您正在渲染 ArticlePage//当这个链接被关注时.</链接>)}使成为(){<div className="row"><div className="col-lg-8 col-md-8 col-sm8">{this.props.articles.map(this.renderItem.bind(this))}
}}
最后在您的 ArticlePage 组件中，创建一个返回父组件的链接.
您的文章page.js
class ArticlePage 扩展 React.Component {componentDidMount(){this.props.fetchArticle(this.props.params.id);}使成为() {返回 (<div className="row"><div className="col-lg-6 col-md-6 col-sm6"><Link to={"/articles"}>文章</Link><div className="文章内容"><h2>{this.props.article.title}</h2><div className="文章正文"><p>{this.props.article.image}</p><p>by {this.props.article.name}</p>
);}}
您可以在此处找到 react-router 上的文档.
I am trying to build CRUD app with react and redux in client side, and I am stuck in this problem for weeks.
I have 2 main components: one for a list of articles and other for an article.
class Category1 extends React.Component {
componentDidMount(){
this.props.fetchArticles();
}
render() {
return (
<div>
{this.props.children ||
<div className="mainContent">
<h1>Category1</h1> <hr />
<ListContainer articles={this.props.articles}/>
</div>
}
</div>
);
}
}
and in the ListContainer, I am iterating data over a list and rendering them with <Link> like this:
export default class ListContainer extends React.Component {
renderItem(article){
return (
<Link to={"/articles/" + article.id} key={article.id} >
<ItemContainer article={article} />
</Link>
)
}
render(){
<div className="row">
<div className="col-lg-8 col-md-8 col-sm8">
{this.props.articles.map(this.renderItem.bind(this))}
</div>
</div>
}
}
When I click an article in a list, it will take me to an article page which also uses componentDidMount to retrieve data of its article.
class ArticlePage extends React.Component {
componentDidMount(){
this.props.fetchArticle(this.props.params.id);
}
render() {
return (
<div className="row">
<div className="col-lg-6 col-md-6 col-sm6">
<div className="article-content">
<h2>{this.props.article.title}</h2>
<div className="article-body">
<p>{this.props.article.image}</p>
<p>by {this.props.article.name}</p>
</div>
</div>
</div>
</div>
);
}
}
My problem is once I access to ArticlePage, I cannot go back to a previous page or go to the other pages from it. It stays in the same page even though a path will change, and I get a console error saying "this.props.articles.map is not a function" which ArticlePage does not have. I am sure its error comes from ListContainer. Also, when I reload the ArticlePage, its components just disappears without getting any error.
This is my routes:
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="login" component={LoginPage}/>
<Route path="signup" component={SignupPage}/>
<Route path="submit" component={auth(SubmitPage)}/>
<Route path="category1" component={Category1}>
<Route path="articles/:id" component={ArticlePage} />
</Route>
<Route path="category2" component={Category2}>
<Route path="articles/:id" component={ArticlePage} />
</Route>
</Route>
How can I fix this?
解决方案
Not sure how you have your routes setup, but this should get you started using react-router
Firstly you should set up your routes where you set up your application.
Your index.js or root page.
import { Router, Route, Link, browserHistory } from 'react-router'
/* imports */
render((
<Router history={browserHistory}>
<Route path="/articles" component={Politics}>
<Route path="/article/:id" component={ArticlePage}/>
</Route>
</Router>
), document.getElementById('root'))
Then in your ListContainer Component create your links to articles.
Your list-container.js
export default class ListContainer extends React.Component {
renderItem(article){
return (
<Link to={"/articles/" + article.id}>
<ItemContainer article={article} /> // <- ??
// Not sure about this part as you do not
// have ItemContainer specified in your question.
// Assumption that you are rendering ArticlePage
// when this link is followed.
</Link>
)
}
render(){
<div className="row">
<div className="col-lg-8 col-md-8 col-sm8">
{this.props.articles.map(this.renderItem.bind(this))}
</div>
</div>
}
}
Finally in your ArticlePage Component, create a link back to your parent component.
Your article-page.js
class ArticlePage extends React.Component {
componentDidMount(){
this.props.fetchArticle(this.props.params.id);
}
render() {
return (
<div className="row">
<div className="col-lg-6 col-md-6 col-sm6">
<Link to={"/articles"}>Articles</Link>
<div className="article-content">
<h2>{this.props.article.title}</h2>
<div className="article-body">
<p>{this.props.article.image}</p>
<p>by {this.props.article.name}</p>
</div>
</div>
</div>
</div>
);
}
}
You can find the docs on react-router here.
这篇关于我获取数据的方式有问题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
