我遇到了错误

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 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)
  }
}

我发现 dispatch 导致警告，但为什么呢？我的域页面目前没有太多内容:

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>

最佳答案

您的 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)，那么这不是问题的原因。

关于javascript - 警告 : setState(. ..):无法在使用 redux/immutable 的现有状态转换期间更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43303513/