react setState似乎被redux调度取消了？答案

【问题标题】：react setState seems to be cancelled by redux dispatch?react setState似乎被redux调度取消了？
【发布时间】：2020-06-15 13:24:09
【问题描述】：

当我单击一个复选框并编辑此现有组件以使用 redux 时，我试图启用一个提交按钮（我意识到这不是很好，我只是想让一个部分在重构之前工作）。目前该按钮不在页面上。

class Survey extends Component {
  state = {
    questionsList: [
      {
        key: 'q1',
        checked: this.props.survey && this.props.survey.includes('q1'),
      },
      {
        key: 'q2',
        checked: this.props.survey && this.props.survey.includes('q2'),
      }
    ],
  };

  handleChange = (e) => {
    const questions = JSON.parse(JSON.stringify(this.state.questionsList));

    // Filter the question for the checkbox user interacted with.
    const question = questions.find(q => q.key === e.target.name);
    question.checked = !question.checked; // toggle

   this.props.setEnableSubmit(questions.some(q => q.checked)); // dispatches a redux action (defined in mapDispatchToProps)
   this.setState({ questionsList: questions });
  }

  render() {
    return this.state.questionsList.map(question => (
      <Checkbox name={question.key} onChange={this.handleChange} />
    ));
  }
}

const mapStateToProps = (state, ownProps) => ({
  survey: state.users[ownProps.match.params.userTarget].survey,
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  setEnableSubmit: (value) => {
    dispatch(update(ownProps.match.params.userTarget, { enableSubmit: value }));
  }
});

export default compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps,
  ),
)(Survey);

我正在尝试将按钮的禁用/启用情况存储在商店中，同时将所有更改保持在本地状态（并且仅在按钮单击时保留在 redux 商店中）

无论出于何种原因，一旦enableSubmit 发生，在重新渲染fn 中this.state.questionsList 不再具有更新的questionsList（所以我无法单击复选框）。但是，如果我删除调度调用，它会起作用。如果 setState 不存在，它具有相同的行为。

它毫无例外地进入 setState。它使用传递的值更新商店中的 enableSubmit。首先或最后调用哪一行，或者是否在调度的 cb 中或调度是 setState 的 cb 似乎并不重要（尝试了所有变体）

【问题讨论】：

你有没有到达你的 setState 或者 setEnableSubmit 中是否发生了一些异常？ setEnableSubmit 有什么作用？
嗯，我的猜测是代码中的其他地方发生了一些事情，我在您发布的 sn-p 中没有看到任何会与您的 setState 混淆的内容。
你的 mapStateToProps 是只接受 dispatch 还是 dispatch 和 ownProps？如果它也需要 ownProps，那么是的，这很正常。
无论如何，如果您从文档中获取第二个参数，它将始终重新渲染：“如果您的 mapDispatchToProps 函数声明为采用两个参数，它将以 dispatch 作为第一个参数调用并将 props 作为第二个参数传递给连接的组件，并且每当连接的组件接收到新的 props 时都会重新调用。”查看spin.atomicobject.com/2018/04/02/redux-rerendering 以获得更深入的解释。
需要更多代码来查看那里到底发生了什么。代码有问题。

标签： javascript reactjs redux react-redux

【解决方案1】：

我发现问题是由于渲染此子组件的组件造成的。父组件有一个 mapStatetoProps 监视 redux 存储的一部分，每当我调用 enableSubmit 时，该存储就会更新，因此父组件正在接收新的道具，重新渲染并因此基于我们的设置创建一个新的子组件实例。所以多次mapDispatchToProps 调用和setState 似乎被忽略是由于一个新的子组件重新实例化

【讨论】：