警告：setState(...)：在现有状态转换期间无法使用 redux/immutable 进行更新答案

【问题标题】：Warning: setState(...): Cannot update during an existing state transition with redux/immutable警告：setState(...)：在现有状态转换期间无法使用 redux/immutable 进行更新
【发布时间】：2017-09-04 08:05:24
【问题描述】：

我收到了错误

警告：setState(...)：在现有状态转换期间无法更新（例如在render 或其他组件的构造函数中）。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至componentWillMount。

我找到了原因

const mapStateToProps = (state) => {
  return {
    notifications: state.get("notifications").get("notifications").toJS()
  }
}

如果我不在那里返回通知，它会起作用。但这是为什么呢？

import {connect} from "react-redux"
import {removeNotification, deactivateNotification} from "./actions"
import Notifications from "./Notifications.jsx"

const mapStateToProps = (state) => {
  return {
    notifications: state.get("notifications").get("notifications").toJS()
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    closeNotification: (notification) => {
      dispatch(deactivateNotification(notification.id))
      setTimeout(() => dispatch(removeNotification(notification.id)), 2000)
    }
  }
}

const NotificationsBotBot = connect(mapStateToProps, mapDispatchToProps)(Notifications)
export default NotificationsBotBot

import React from "react"

class Notifications extends React.Component {
  render() {
    return (
      <div></div>
    )
  }
}

export default Notifications

更新

在进一步调试中我发现，以上可能不是根本原因，我可以保留通知，但我需要删除 dispatch(push("/domains")) 我的重定向。

这是我的登录方式：

export function doLogin (username, password) {
  return function (dispatch) {
    dispatch(loginRequest())
    console.log("Simulated login with", username, password)
    setTimeout(() => {
      dispatch(loginSuccess(`PLACEHOLDER_TOKEN${Date.now()}`))
      dispatch(addNotification({
        children: "Successfully logged in",
        type: "accept",
        timeout: 2000,
        action: "Ok"
      }))
      dispatch(push("/domains"))
    }, 1000)
  }
}

我发现调度导致了警告，但是为什么？我的域名页面目前没有太多内容：

import {connect} from "react-redux"
import DomainsIndex from "./DomainsIndex.jsx"

export default connect()(DomainsIndex)

域索引

export default class DomainsIndex extends React.Component {
  render() {
    return (
      <div>
        <h1>Domains</h1>
      </div>
    )
  }
}

更新 2

我的App.jsx。 <Notifications /> 是显示通知的地方

  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Layout>
        <Panel>
          <Switch>
            <Route path="/auth" />
            <Route component={TopBar} />
          </Switch>

          <Switch>
            <Route exact path="/" component={Index} />
            <Route path="/auth/login" component={LoginBotBot} />
            <AuthenticatedRoute exact path="/domains" component={DomainsPage} />
            <AuthenticatedRoute exact path="/domain/:id" component={DomainPage} />
            <Route component={Http404} />
          </Switch>
          <Notifications />
        </Panel>
      </Layout>
    </ConnectedRouter>
  </Provider>

【问题讨论】：

你能把代码上传到一个仓库让我们玩吗？这个设置有点难以理解。
附带说明，您应该使用 .getIn([])，而不是使用 .get().get()。
根据我的经验，这与动作的结构无关，而与触发动作的位置有关。通常，您在从 componentWillMount 或 render 触发操作时会看到此错误。即使是错误的，例如当写onClick={action()}而不是onClick={action}时。
你能不能在action creatordoLogin中逐行查看哪个在抱怨，是addNotification还是push方法，现在没有那个充分了解正在发生的事情的大量信息。
@cabolanoz 它的推动力。没有它，我不会收到警告。

标签： javascript reactjs redux react-redux

【解决方案1】：

您的dispatch(push('/domains')) 伴随着其他调度，这些调度为在push 生效后重新挂载/卸载的已连接组件（大概是一个关心通知的组件）设置状态。

作为一种解决方法和概念证明，请尝试使用嵌套的零秒 setTimeout 推迟 dispatch(push('/domains')) 调用。这应该在任何其他操作完成（即希望渲染）之后执行push：

setTimeout(() => dispatch(push('/domains')), 0)

如果可行，那么您可能需要重新考虑您的组件结构。我想Notifications 是您想要安装一次并在应用程序的整个生命周期内保留它的组件。尽量避免重新安装它，方法是将它放在组件树的较高位置，并使其成为PureComponent（这里是docs）。此外，如果您的应用程序的复杂性增加，您应该考虑使用库来处理异步功能，例如 redux-saga。

即使这个警告通常是因为一个错误的动作调用而出现的（例如在渲染上调用一个动作：onClick={action()} 而不是作为 lambda 传递：onClick={() => action()}），如果你的组件看起来像你提到的那样（只是渲染div)，那么这不是问题的原因。

【讨论】：

我尝试了 setTimeout 的 0 延迟和 1 秒的延迟，但仍然会导致相同的错误。我会尝试在我的问题中添加更多细节
我想说给我们一个回购链接。否则这是不可能确定的

【解决方案2】：

我过去遇到过这个问题，并设法使用redux-batched-actions 解决它。

对于像您这样的用例，当您一次分派多个操作并且您不确定何时触发更新时，它非常有用，这样，多个操作将只有一个分派。在您的情况下，似乎后续的addNotification 很好，但是第三个太多了，可能是因为它与历史 API 交互。

我会尝试做类似的事情（假设你的 setTimeout 当然会被一个 api 调用代替）：

import { batchActions } from 'redux-batched-actions'

export function doLogin (username, password) {
  return function (dispatch) {

    dispatch(loginRequest())
    console.log("Simulated login with", username, password)

    setTimeout(() => {

      dispatch(batchActions([
        loginSuccess(`PLACEHOLDER_TOKEN${Date.now()}`),
        addNotification({
          children: "Successfully logged in",
          type: "accept",
          timeout: 2000,
          action: "Ok"
        }),
        push("/domains")
      ]))

    }, 1000)
  }
}

请注意，您必须在商店创建中下载包和 enableBatching 您的减速器。

【讨论】：

【解决方案3】：

发生这种情况的原因是您何时调用doLogin，如果您从constructor 中调用它。如果是这种情况，请尝试将其移至componentWillMount，尽管您应该从按钮调用此方法或在登录表单中输入 hit。

这已记录在 constructor should not mutate 中@

【讨论】：

【解决方案4】：

没有足够的信息来给出确定的答案。但可以肯定的是，当您尝试在 setState 内部 render 方法时会引发此警告。

当您调用处理函数而不是将它们作为道具传递给子Component 时，通常会发生这种情况。就像发生在 here 或 here 一样。

所以我的建议是仔细检查您的 /domains 路由上正在呈现哪些 Components，以及您如何将 onChange、onClick 等处理程序传递给他们和他们的孩子。

【讨论】：

【解决方案5】：

在一个react组件中，当你调用setState({...})时，它会导致组件重新渲染，并调用组件重新渲染所涉及的所有生命周期方法，render方法就是其中之一

当在render 中调用setState({...}) 时，它会导致重新渲染，并且会一次又一次地调用渲染，因此这将触发javascript 内的无限循环，最终导致应用程序崩溃

因此，不仅在render 中，而且在作为重新渲染过程的一部分的任何生命周期方法中都不应调用setState({...}) 方法。

在您的情况下，代码可能会在代码仍在渲染时触发 redux 状态的更新，因此这会导致重新渲染和反应显示错误

【讨论】：