调用使用react-router属性的props提供的方法

Question

我很难解决这个问题。我想知道这里有人能看一眼吗？我有一个组件，我将名为this.fetchContent的方法传递给名为Filter的道具。 this.fetchContent触发一个动作创建者，它通过Redux使用axios从API获取一些数据，我通过this.props.params使用react-router将当前页面位置传递给它。

从子组件调用方法时会出现问题。我所做的是将this.props.fetchContent绑定到Filter组件内的onClick处理程序。每当我单击<Link />标记时，该函数都会触发，页面路径会更新。但是，在函数触发后 之前，父组件props的值不会更新，只会导致所有其他点击产生正确的API调用。

应用

class App extends Component {
  constructor(props) {
    super(props)

    this.fetchContent = this.fetchContent.bind(this);
  }
  static contextTypes = {
    router: PropTypes.object
  };

  componentDidMount() {
    this.fetchContent();
  }

  fetchContent() {
    let query = `${this.props.params.sub}/${this.props.params.filter}`;
    this.props.fetchList(query, this.props.location.search);
  }

  render() {
    return (
      <div>
        <Filter 
          filter={this.props.params.filter}
          sub={this.props.params.sub}
          search={this.props.location.search}
          fetchContent={this.fetchContent} />
          {React.cloneElement(this.props.children, this.props)}
      </div>
    );
  }
}

过滤

class Filter extends Component {

    render() {
        return (
            <div className="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
                <div className="mdl-tabs__tab-bar">
                    <Link to={`/r/${this.props.sub}/new/${this.props.search}`} onClick={this.props.fetchContent}>
                        <span className="mdl-tabs__tab is-active">Hot</span>
                    </Link>
                </div>
            </div>  
        )
    }
}

我理解这里发生了什么，但我不确定解决这个问题的反应友好方式是什么。如何重新设计代码以产生我需要的结果以及解决此类问题的最佳实践？

修改：更新了语法，但仍然遇到了同样的问题。

Answer 1

我相信你有一些语法错误。您正在执行该功能而不是返回它。

此

<Link to={`/r/${this.props.sub}/new/${this.props.search}`} onClick={this.props.fetchContent()}>
    <span className="mdl-tabs__tab is-active">Hot</span>
</Link>

应该是这样的;

<Link to={`/r/${this.props.sub}/new/${this.props.search}`} onClick={this.props.fetchContent}>
    <span className="mdl-tabs__tab is-active">Hot</span>
</Link>

或者喜欢这个

<Link to={`/r/${this.props.sub}/new/${this.props.search}`} onClick={() => { this.props.fetchContent() }}>
    <span className="mdl-tabs__tab is-active">Hot</span>
</Link>

PS：我认为您在App组件上有拼写错误，因为您在渲染时没有关闭Filter组件。