反应错误：“在现有状态转换期间无法更新”

Question

我正在尝试编写一个使用Toastr组件的应用程序。但是，当我尝试在此组件中分派redux操作时，会收到以下控制台消息：

  

警告：在现有状态转换过程中无法更新（例如   render或其他组件的构造函数中）。渲染方法   应该是道具和国家的纯粹职能；构造函数的副作用   是反模式，但可以移至componentWillMount。

您可以在this codesandbox中看到一个示例。特别是问题在于第23行的toastr.js组件。谢谢！

Answer 1

问题恰恰是错误消息所表明的：您直接在render()方法内部触发了一种React状态更新形式：

const Toasts = ({ appointments, resetState, toastedAppointment, toasts }) => {
  if (toasts.type) {
    switch (toasts.type) {
      case "dataFetched":
        resetState(); // Dispatching this action creates the warning.

在这种情况下，它正在调度Redux动作，但最终会导致React setState()调用。

不要那样做：)副作用逻辑，例如基于当前状态触发某种附加更新，可能应该发生在componentDidUpdate之类的事情中。 Toasts组件可能需要相应地从功能组件转换为类组件。