简单的 React+Redux 应用程序会导致“警告：传递给 useMemo 的最终参数在渲染之间改变了大小。” 对于每个状态变化

Question

我制作了一个非常简单的 react+redux 应用程序，但是在调度任何操作时，我在浏览器控制台中收到 7 个警告，关于useMemo. 下面是第一个：

Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.

Previous: [[object Object]]
Incoming: [[object Object], function () {
        // Distinguish between actual "data" props that were passed to the wrapper component,
        // and values needed to control behavior (forwarded refs, alternate context instances).
        // To maintain the wrapperProps object reference, memoize this destructuring.
        var forwardedRef = props.forwardedRef,
            wrapperProps = Object(_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__["default"])(props, ["forwardedRef"]);

        return [props.context, forwardedRef, wrapperProps];
      }, 0]
    in ConnectFunction
    in Provider

我没有使用useMemo自己，它只是从react-redux包触发并简化了代码以达到这一点，但我仍然不知道如何识别问题。有任何想法吗？（以下是我的完整代码）

Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.

Previous: [[object Object]]
Incoming: [[object Object], function () {
        // Distinguish between actual "data" props that were passed to the wrapper component,
        // and values needed to control behavior (forwarded refs, alternate context instances).
        // To maintain the wrapperProps object reference, memoize this destructuring.
        var forwardedRef = props.forwardedRef,
            wrapperProps = Object(_babel_runtime_helpers_esm_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1__["default"])(props, ["forwardedRef"]);

        return [props.context, forwardedRef, wrapperProps];
      }, 0]
    in ConnectFunction
    in Provider

编辑：以下是依赖项package.json：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { connect, Provider } from "react-redux";
import { createStore, Dispatch } from 'redux';

const increment = () => ({ type: 'INCREMENT' });
const counterReducer =
    (state = 10, action: { type: string }) => (action.type === 'INCREMENT') ? state + 1 : state;

interface Props { count: number }
interface Actions { inc: () => {} };
class AppComponent extends React.Component<Props & Actions> {
    render = () =>
    (<>
        Count: {this.props.count}
        <button onClick={this.props.inc}>+</button>
    </>);
}
const mapStateToProps = (state: number) : Props => ({ count: state });
const mapDispatchToProps = (dispatch: Dispatch) => ({ inc: () => dispatch(increment()) });
const App = connect(mapStateToProps, mapDispatchToProps)(AppComponent);

ReactDOM.render(
    <Provider store={createStore(counterReducer)}>
        <App />
    </Provider>,
    document.getElementById("root")
);

实际上有更多的警告，他们都来自connect的一部分react-redux。的每次调用useMemo在ConnectFuncion导致类似的警告。

Answer 1

我发现了这个问题。是因为我配置了react-hot-loader. 看着我的webpack.config.js

module.exports = {
    entry: [
        './src/boot.tsx',
        'react-hot-loader/patch'
    ],
    ...
};

和读取描述的react-hot-reload程序包：

预先添加您的 webpack 入口点

所以问题只是包入口点中项目的顺序，交换它们解决了问题：

module.exports = {
    entry: [
        'react-hot-loader/patch',
        './src/boot.tsx'    
    ],
    ...
};