Aviso: setState (…): não é possível atualizar durante uma transição de estado existente com redux / immutable
Estou recebendo o erro
Aviso: setState (...): não é possível atualizar durante uma transição de estado existente (como emrender
ou o construtor de outro componente). Os métodos de renderização devem ser uma função pura de adereços e estado; efeitos colaterais do construtor são um antipadrão, mas podem ser movidos paracomponentWillMount
.
Eu achei a causa
const mapStateToProps = (state) => {
return {
notifications: state.get("notifications").get("notifications").toJS()
}
}
Se eu não retornar as notificações, ele funcionará. Mas porque é isso?
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
ATUALIZAR
Em depuração adicional, descobri que, acima de tudo, talvez não seja a causa raiz, posso manter as notificações, mas preciso removerdispatch(push("/domains"))
meu redirecionamento.
É assim que eu faço o login:
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)
}
}
Acho que o despacho causa o aviso, mas por quê? A página Meus domínios não tem muito mais atualmente:
import {connect} from "react-redux"
import DomainsIndex from "./DomainsIndex.jsx"
export default connect()(DomainsIndex)
DomainsIndex
export default class DomainsIndex extends React.Component {
render() {
return (
<div>
<h1>Domains</h1>
</div>
)
}
}
ATUALIZAÇÃO 2
MinhasApp.jsx
. <Notifications />
é o que exibe as notificações
<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>