时间戳

首页 > 解决方案 > react setState似乎被redux调度取消了？

javascript - react setState似乎被redux调度取消了？

问题描述

当我单击一个复选框并编辑这个现有组件以使用 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 似乎并不重要（尝试了所有变体）

标签： javascriptreactjsreduxreact-redux

解决方案

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

推荐阅读