В вашем случае код может инициировать обновление в состоянии избыточности, в то время как код все еще рендерится, и, следовательно, это вызывает повторный рендеринг и показывает ошибку
учаю ошибку
Предупреждение: setState (...): невозможно обновить во время существующего перехода состояния (например, внутриrender
или конструктор другого компонента). Методы рендеринга должны быть чистой функцией реквизита и состояния; побочные эффекты конструктора - это анти-паттерн, но их можно перенести в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)
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>