javascript - React-router:ajax请求点击链接

Question

这三个链接是选项卡，每个选项卡都有一个ajax请求handleRequest，也在componentDidMount()中调用。当我第一次单击该选项卡时，它发送请求，但会显示错误的数据，但当我再次单击它时，会显示正确的数据，我感到很困惑。我想知道我是否误解了有关此 react 路由器的某些内容或其他内容。

<Link to="/big-deals"
 className={classnames('tab', { '-active': sort === undefined})}
 onClick={this.handleRequest}>
  Most Popular
</Link>

<Link to="/big-deals"
  className={classnames('tab', { '-active': sort === 'best_seller'})}
  query={{ sort: 'best_seller' }}
  onClick={this.handleRequest}>
  Best Sellers
</Link>

<Link to="/big-deals"
 className={classnames('tab', { '-active': sort === 'new_arrival'})}
 query={{ sort: 'new_arrival' }}
 onClick={this.handleRequest}>
 New Arrivals
</Link>

建议将不胜感激。谢谢

其余代码如下所示:)

import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { Link } from 'react-router';
import Helmet from 'react-helmet';

import { connect } from 'react-redux';
import bindActionCreators from 'utils/redux/bindActionCreators';

import { tagsSelector } from 'selectors/bigdeals';
import { getTags } from 'modules/tags';

import ProductPanel from './components/ProductPanel';

export default class BigDeals extends React.Component {


  constructor(props) {
    super(props);

    this.handleRequest = ::this.handleRequest;
    this.handleTags = ::this.handleTags;
  }

  static propTypes = {
    actions: PropTypes.shape({
      getTags: PropTypes.func
    }).isRequired,

    products: PropTypes.object.isRequired,
    isFetching: PropTypes.bool.isRequired,
    isFetchingError: PropTypes.bool.isRequired,

    // router state
    // primarily used for componentWillMount
    router: PropTypes.object.isRequired
  };

  componentDidMount() {
    this.handleRequest(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if ( nextProps.router === this.props.router ) {
      return;
    }
    this.handleRequest(nextProps);
  }

  render() {
   const {
      products,
      isFetching,
      isFetchingError,
      location,
      tagsSelector
    } = this.props;
    const { sort } = this.props.location.query;
    return (
      <div>
        <Helmet title="Big Deals" />

        <div className="hero">
          <h1 className="heading">One Big Deals</h1>
          <h2 className="subheading">Get the most popular, best selling and new products now!</h2>
        </div>

        <div className="container">
          <div className="box-tabs">
            <Link to="/big-deals"
              className={classnames('tab', { '-active': sort === undefined})}
              onClick={this.handleRequest}>
              Most Popular
            </Link>
            <Link to="/big-deals"
              className={classnames('tab', { '-active': sort === 'best_seller'})}
              query={{ sort: 'best_seller' }}
              onClick={this.handleRequest}>
              Best Sellers
            </Link>

            <Link to="/big-deals"
              className={classnames('tab', { '-active': sort === 'new_arrival'})}
              query={{ sort: 'new_arrival' }}
              onClick={this.handleRequest}>
              New Arrivals
            </Link>
          </div>

          <div className="row">
            <ProductPanel
              view={location.query.view}
              products={products}
              isFetching={isFetching}
              isFetchingError={isFetchingError} />
          </div>

        </div>
      </div>
    );
  }

  handleRequest(props) {
    this.props.actions.getTags(this.props.tagsSelector, this.props.location.query.page);
  }
}

const mapStateToProps = state => ({
  products: state.tags.collection,
  isFetching: state.tags.isFetching,
  isFetchingError: state.tags.isFetchingError,
  tagsSelector: tagsSelector(state),
  router: state.router
});

const mapActionsToProps = dispatch => bindActionCreators({ getTags }, dispatch);

export default connect(mapStateToProps, mapActionsToProps)(BigDeals);

Answer 1

我刚刚注意到的一件事:您使用 props 参数来 handleRequest，但始终使用 this.props。您可能想有条件地使用它们:

  handleRequest(props) {
    props = props || this.props;
    props.actions.getTags(props.tagsSelector, props.location.query.page);
  }

这里的问题是 onClick 会将事件作为第一个参数传递，因此 props 永远不会是假的；您可能需要一个单独的处理程序来处理 onClick 和 componentWillReceiveProps 中的更改。

此外，根据您的评论，我确实认为 onClick 在 query 属性更改之前触发，因此您可能需要推迟调用该操作，或者仅在组件更新时调用该操作。