javascript - Dispatch 和 setState 不能一起工作，而是独立工作

Question

我有一个 DatePicker 组件，当我单击新日期时，它应该在 redux 存储中设置更改日期，并且在用户体验方面也很明显。

出于某种原因，我将把我的代码放在下面的 handleChange 函数中，同时使用 setState 和 this.props.addFitler 在那里触发，redux 存储正确更新，但 UX 没有。 但是，如果我注释掉 this.props.addFilter 调度函数，用户体验就会正确更新(显然商店不会)。

为什么这两者不能一起工作？我尝试过更改它们的调用顺序，将每个函数提取到另一个函数中，使用 mapDispatchToProps 而不是直接调用操作创建者，但都无济于事。

DatePicker.js:

import DatePicker from 'react-datepicker';

class DatePick extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: moment()
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(date) {
    const { dashboardName } = this.props;
    const { name } = this.props.column;
    this.props.addFilter(date, dashboardName, name);
    this.setState({date});
  }
  render() {
    return (
      <div style={{display: 'inline-block', fontWeight: 'bold'}}>
        <DatePicker
          dateFormat="DD/MM/YYYY"
          selected={this.state.date}
          onChange={this.handleChange} />
      </div>
    );
  }
}

const mapActionToProps = {
  addFilter
};

export default connect(null, mapActionToProps)(DatePick);

handleChange 函数中传递的“date”参数是一个 moment 对象，就像用于设置initialState 的对象一样，因此这不是问题。

其他信息:如果我在 setState() 之前和之后进行控制台日志，它会两次记录初始状态。

有人遇到过这个问题或者有什么想法吗？如果您需要查看我的 redux，我可以使用更多代码更新帖子，但我认为这不是问题，因为它可以很好地更新商店。

Answer 1

我找到了解决方案， Action 创建者调用正在执行一些同步操作，并且整个 UI 线程被锁定，直到它完成正在执行的操作。因此，我们可以借助 setTimeout 稍微延迟调用，一切都会按预期进行