在库更新后在现有状态转换消息期间获取无法更新

Question

拥有最近更新的 ReactJS + Redux + Saga 应用程序，以使用各自 JS 库的最新（或接近最新）版本。在库更新（无代码更改）并运行应用程序后，我立即在控制台中看到 "Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state." 警告消息。当我调用调度函数时，它看起来是由 redux 触发的（然后调用 Provider.js 中的一个函数，然后通过 react-dom，然后依次写入警告消息。我的代码中也没有任何变化，我的代码本质上是使用无状态函数构建的。

不确定如何找出导致此警告的原因 - 尽管应用程序仍然可以按预期运行。使用 React 16.8.6、react-redux 6.0.1、react-router-dom 5.0.0、redux 4.0.1、redux-saga 1.0.2 和 connected-react-router 6.4.0。

以下是会导致警告消息的示例页面：

import React from 'react'
import {connect} from 'react-redux'
import {links} from '../links'
import {notify} from '../notifications'

const Home = props => {
    const {dispatch} = props

    return (
        <main>          
            <p>
                <a href={links.DETAILS} onClick={() => {dispatch(notify(links.DETAILS))}} target="_blank">Go to Details</a>...
            </p>
        </main>
    )}
const dispatcher = dispatch => {
    dispatch(notify(links.HOME))

    return {dispatch}
}
export default connect(null, dispatcher)(Home)      

Answer 1

您不能在disaptcher 函数内调用dispatch。

react-redux 的connect 参数为：

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

mapDispatchToProps 就是你所说的dispatch。这些参数最终作为在连接组件的render 循环中调用的函数运行。当您在 render 循环中 dispatch 时，它会更改 React 组件的状态（看起来像是 Provider），这是 React 禁止的。

解决方案 将 dispatch(notify(links.HOME)) 移动到生命周期方法。例如，您可以添加到Home 组件（这需要将Home 组件重写为React.Component 类的扩展：

componentDidMount() {
  dispatch(notify(links.HOME))
}

更新

如果您想使用无类组件执行此操作，请参阅 question