データを取得する方法が間違っていますか？

Question

私はクライアント側でreactとreduxを使用してCRUDアプリケーションを作成しようとしていますが、この問題で何週間も悩んでいます。

私は2つの主要なコンポーネントを持っています：1つは記事のリスト用で、もう1つは記事用です。
私はAJAXのデータを取得し、サーバーにcomponentDidMountで要求を取得する呼び出しています：

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

とListContainerで、私はリスト上でデータを反復処理していますし、このような<Link>でそれらをレンダリング：

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

リスト内の記事をクリックすると、articleDidMountを使用してその記事のデータを取得する記事ページに移動します。
記事ページコンポーネント：

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

私の問題は、私はArticlePageにアクセスしたら、私は前のページに戻るか、そこから他のページに行くことができないです。パスが変わっても同じページにとどまり、ArticlePageにはない "this.props.articles.mapは関数ではない"というコンソールエラーが表示されます。私はそのエラーが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> 

私はこれをどのように修正することができますか？

Answer 1

あなたのルート設定の仕組みがわからないのですが、react-routerを使用して開始する必要があります。

まず、アプリケーションを設定するルートを設定する必要があります。

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

次に、あなたのListContainerコンポーネントに記事へのあなたのリンクを作成します。

あなたのリスト-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> 
    } 
} 

は、最後にあなたのArticlePageコンポーネントには、戻ってあなたの親コンポーネントへのリンクを作成します。

あなたの記事-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.