reactjs - redux-form 警告无法从不同组件的函数体内部更新组件

Question

我在 React 表单中遇到了这个问题。在输入字段中输入或删除值后，我在控制台中收到红色警告。如果我注释掉 validate Prop 一切正常。

Warning: Cannot update a component from inside the function body of a different component.

import { Field, reduxForm } from 'redux-form';

const required = value => (value ? undefined : 'Required field')

const renderField = ({
    input,
    label,
    type,
    meta: { touched, error, warning }
}) => (
        <div>
            <label>{label}</label>
            <div>
                <input {...input} placeholder={label} type={type} />
                {touched &&
                    ((error && <span>{error}</span>) ||
                        (warning && <span>{warning}</span>))}
            </div>
        </div>
    )

function LoginForm(props) {
    const { handleSubmit } = props;
    return (
        <form onSubmit={handleSubmit} >
            {console.log("LOGIN FORM PROPS", props)}
            <Field
                label="Username"
                name="username"
                component={renderField}
                type="text"
                placeholder="username"
                validate={[required]}
            />
            <Field
                label="Password"
                name="password"
                component={renderField}
                type="password"
                placeholder="password"
                validate={[required]}
            />
            <button type='submit'>Submit</button>
        </form>
    )
}

export default reduxForm({
    form: 'loginForm'
})(LoginForm)

Answer 1

更新react 和react-dom 版本16.13.1，移除警告
更多细节在这里找到 -> https://github.com/redux-form/redux-form/issues/4619

更新 react 和 react-dom 版本后如果警告仍然存在则有两种情况

案例一
这是因为 react-hot-loader。因此，在 webpack.config.js

中将 react-hot-loader 替换为 @pmmmwh/react-refresh-webpack-plugin

案例二
这是因为@hot-loader/react-dom，@hot-loader/react-dom还在16.13.0版本上，与 react@16.13.1 不兼容，所以，在 webpack.config.js 中替换 @hot-loader/react-dom 别名，如下所示例子

webpack.config.js

//replace @hot-loader/react-dom with react-dom only
...
resolve: {
    alias: {
      'react-dom': 'react-dom', 
    },
  }
...