Reactjs 我获取数据的方式有问题吗？

我正在尝试在客户端用react和redux构建CRUD应用程序，我已经陷入这个问题好几个星期了

我有两个主要组件：一个用于文章列表，另一个用于文章。
我使用componentDidMount调用AJAX get请求到检索数据的服务器：

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>
         );
      }
}   

类类别1扩展了React.Component{
componentDidMount（）{
this.props.fetchArticles（）；
}
render（）{
返回(
{这个。道具。孩子们||
类别1

}
);
}
}   

在ListContainer中，我在列表上迭代数据，并使用

呈现它们，如下所示：

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

导出默认类ListContainer扩展React.Component{
renderItem（文章）{
返回(
)
}
render（）{
{this.props.articles.map（this.renderItem.bind（this））}
}
}

当我单击列表中的文章时，它会将我带到一个文章页面，该页面也使用componentDidMount检索其文章的数据。
文章页面组件：

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>
       );
    }
 }

class ArticlePage扩展React.Component{
componentDidMount（）{
this.props.fetchArticle（this.props.params.id）；
}
render（）{
返回(
{this.props.article.title}
{this.props.article.image}

通过{this.props.article.name}

);
}
}

我的问题是，一旦我访问ArticlePage，我就无法返回到上一页或从上一页转到其他页。即使路径将发生更改，它仍保持在同一页面中，并且我收到一个控制台错误，上面说“this.props.articles.map不是函数”，而ArticlePage没有。我确信它的错误来自ListContainer。另外，当我重新加载ArticlePage时，它的组件会消失，而不会出现任何错误

这是我的路线：

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

---

我怎样才能解决这个问题

不确定如何设置路线，但这应该可以让您开始使用

首先，您应该在设置应用程序的位置设置路由

您的index.js或根页面。

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'))

最后，在

ArticlePage

组件中，创建一个指向父组件的链接

你的文章页面.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>
    );
  }
}

class ArticlePage扩展React.Component{
componentDidMount（）{
this.props.fetchArticle（this.props.params.id）；
}
render（）{
返回(
文章
{this.props.article.title}
{this.props.article.image}

通过{this.props.article.name}

);
}
}

---

我不认为这是因为react路由器或我如何设置路由。正如我所说，我可以访问ArticlePage组件，但我无法从ArticlePage转到其他页面或重新加载页面。您是否尝试过在文章页面内添加链接的建议？你说“重新加载”是什么意思？不，我没有。我试试看。我的意思是刷新一页。我刚试过，但没用。另外，当我从ArticlePage中删除componentDidMount方法时，它会工作，但不会获取数据。好的，react router不会像浏览器通常处理页面路由或刷新的方式那样“重新加载”您的页面，它实际上会根据组件操作您的DOM。从文档中可以看出，“React Router使您的UI与URL保持同步。”因此，基本上您正在尝试做两件不同的事情。React是为“单页”应用程序设计的，它处理视图时不刷新整个页面，而只是使用虚拟DOM更新差异。比这复杂得多，但空间有限…请发布您的路由设置，因为解决此问题很重要。我刚刚添加了，但我认为我的路由设置没有问题

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>
    );
  }
}