代码之家  ›  专栏  ›  技术社区  ›  Jimmy

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

  •  0
  • Jimmy  · 技术社区  · 7 年前

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

    警告:无法在现有状态转换期间更新(例如 在内部 render 或者另一个组件的构造函数)。渲染方法 应该是属性和状态的纯函数;构造函数的副作用 是反模式,但可以移动到 componentWillMount .

    您可以在中看到此示例 this codesandbox . 特别是,问题出现在第23行的toastr.js组件中。谢谢!

    1 回复  |  直到 7 年前
        1
  •  2
  •   markerikson    7 年前

    问题正是错误消息所说的:您直接在 render() 方法:

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

    在这种情况下,它正在调度一个redux操作,但最终会导致一个响应 setState() 打电话。

    不要这样做:)副作用逻辑,如根据当前状态触发某种额外的更新,可能发生在如下情况中 componentDidUpdate . 这个 Toasts 组件可能需要相应地从函数组件转换为类组件。