Question

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

<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道具之前触发了，因此您可能需要推迟调用该操作，或者仅在组件更新时调用操作。

React-router：ajax请求onClick到链接

1 个答案: