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."警告消息。当我调用调度函数（然后在Provider.js中调用一个函数，然后通过react-dom，然后依次写警告消息）时，它似乎由redux触发。代码又没有改变，代码本质上是使用无状态函数构建的。

不确定如何找出导致此警告的原因-尽管该应用程序仍可以按预期运行。使用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

您无法在dispatch函数中调用disaptcher。

react-redux的connect参数是：

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

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

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

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

更新

如果要对无类组件执行此操作，请参见question

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

1 个答案: