Question

我正在尝试使用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>
         );
      }
}

并且在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>
   }
}

当我点击列表中的文章时，它会转到一个文章页面，该页面也使用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>
       );
    }
 }

我的问题是，一旦我访问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>

我该如何解决这个问题？

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组件中创建指向文章的链接。

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

最后在您的ArticlePage组件中，创建一个返回父组件的链接。

您的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.

我获取数据的方式出了什么问题？

1 个答案: