Advertencia: setState (...): no se puede actualizar durante una transición de estado existente con redux / inmutable
Recibo el error
Advertencia: setState (...): no se puede actualizar durante una transición de estado existente (como enrender
o el constructor de otro componente). Los métodos de renderizado deberían ser una función pura de accesorios y estado; los efectos secundarios del constructor son un antipatrón, pero se pueden mover acomponentWillMount
.
Encontré la causa para ser
const mapStateToProps = (state) => {
return {
notifications: state.get("notifications").get("notifications").toJS()
}
}
Si no devuelvo notificaciones allí, funciona. ¿Pero por qué es eso?
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
ACTUALIZAR
En una depuración adicional descubrí que, después de todo, lo anterior puede no ser la causa raíz, puedo hacer que las notificaciones permanezcan, pero necesito eliminardispatch(push("/domains"))
mi redirección
Así es como inicio sesión:
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)
}
}
Encuentro que el envío causa la advertencia, pero ¿por qué? Mi página de dominios no tiene mucho actualmente:
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>
)
}
}
ACTUALIZACIÓN 2
MiApp.jsx
. <Notifications />
es lo que muestra las notificaciones
<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>