javascript - Redux 存储不会随着反应状态的变化而变化

Question

我正在尝试根据当前状态更改更改 redux 存储，状态更改正确但this.props仍作为初始化。这是我的代码：

componentWillMount(){
    this.props.fetchMatches();
  }

  handleChange(newDateRange){
    console.log('====================================');
    console.log('handleChange fired');
    console.log(this.state);
    console.log('====================================');
  }


function mapDispatchToProps(dispatch) {
  return {
    handleChange: (newDateRange) =>
      dispatch({
      ...this.props.home,
      startDate: newDateRange[0],
      endDate: newDateRange[1]
    })
  }
}

export default connect(mapStateToProps, { mapDispatchToProps, fetchMatches })(Home);

这是以下的实现DateRange：

<DateRangeInput className="daterange" value={[this.props.startDate, this.props.endDate]} onChange={this.handleChange}  />       

标签： javascriptreactjsreduxreact-reduxredux-thunk

Answer 1

您无法从此访问 mapDispatchToProps 中的道具，因为即使在组件安装之前调用了该函数。而是从 mapDispatchToProps 访问它，它在第二个参数中公开了先前的道具。

function mapDispatchToProps(dispatch, ownProps) {
  return {
    handleChange: (newDateRange) =>
      dispatch({
      ...ownProps.home,
      startDate: newDateRange[0],
      endDate: newDateRange[1]
    })
  }
}

mapDispatchToProps API 文档