Question

我使用Redux进行React JS的状态管理，但在类组件中有一个与按钮相关的事件处理程序，如下所示：

  handleStartBtn = e => {
    const name = document.getElementById("nameInput").value;
    const error = "You must set a value in this field";
    this.props.createPoll(name);
    if (!this.props.currentPoll) return;
    cookies.set("assignments", `EHS_${this.props.currentPoll.uuid}`, {
      path: "/"
    });
    this.props.history.push("/polling");
  };

createPoll函数在我的动作文件中。创建民意调查后，我调度了一个成功函数，它会访问商店，然后更改currentPoll属性。但是似乎在调用调度的createPoll后它将保留为空，我必须两次单击startBtn直到要更新商店。调度方法调用后如何使用store的值？

Answer 1

您可以尝试使用componentDidUpdate()生命周期方法来解决此问题。

handleStartBtn = e => {
    const name = document.getElementById("nameInput").value;
    const error = "You must set a value in this field";
    this.props.createPoll(name);
};

componentDidUpdate(prevProps,prevState){
 if(prevProps.currentPoll !== this.props.currentPoll){
    cookies.set("assignments", `EHS_${this.props.currentPoll.uuid}`, {
      path: "/"
    });
    this.props.history.push("/polling");
 }
}

当您通过this.props.createPoll(name);分派操作时，currentPoll的redux状态将被更改，然后发生此更改，componentDidUpdate将被触发，在这里您可以进行检查（尽管适当的条件），然后继续需要做的事情。

在组件方法中调度动作后，如何使用已更改存储状态？

1 个答案: