Question

我正在使用反应表格来解决这个问题。在输入字段中输入或删除值后，控制台中会出现红色警告。如果我注释掉validate属性，一切都会很好。

警告：无法从组件的功能主体内部更新组件不同的组件。

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版本之后，如果警告仍然存在，则有两种情况

案例1
因为它是react-hot-loader。因此，将react-hot-loader中的@pmmmwh/react-refresh-webpack-plugin替换为webpack.config.js

案例2
这是由于@hot-loader/react-dom，@hot-loader/react-dom仍在16.13.0版本上，它与react@16.13.1不兼容，因此，像在@hot-loader/react-dom中替换webpack.config.js下面的例子

webpack.config.js

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

redux-form警告无法从其他组件的功能主体内部更新组件

1 个答案: