web-dev-qa-db-fra.com

avertissement redux-form Impossible de mettre à jour un composant à partir du corps de fonction d'un autre composant

Je reçois ce problème avec le formulaire de réaction. Après avoir entré ou supprimé des valeurs du champ de saisie, j'obtiens un avertissement rouge dans la console. Si je commente l'accessoire de validation, tout fonctionne bien.

Avertissement: impossible de mettre à jour un composant à partir du corps de fonction d'un autre composant.

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)
reactjsredux-form
2
spile_maca

Mettre à jour react et react-dom version 16.13.1, l'avertissement a été supprimé
plus de détails ici -> https://github.com/redux-form/redux-form/issues/4619

après la mise à jour de la version react et react-dom si l'avertissement est toujours là, il y a deux cas

Cas 1
c'est parce que react-hot-loader. alors, remplacez react-hot-loader avec @pmmmwh/react-refresh-webpack-plugin dans webpack.config.js

Cas 2
C'est à cause de @hot-loader/react-dom, @hot-loader/react-dom est toujours sur la version 16.13.0, il n'est pas compatible avec [email protected], alors, remplacez @hot-loader/react-dom alias dans webpack.config.js comme exemple ci-dessous

webpack.config.js

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