Блог

Я создал контактную форму мастера, где на определенном шаге у меня появляется кнопка «Войти в систему с помощью Google», если пользователь входит в систему с помощью Google, то некоторые поля CF заполняются данными Google (имя, фамилия, электронная почта).

Все работает нормально, но я заметил, что как только пользователь входит в систему и поля заполняются, предыдущие данные формы (данные, которые я получил на предыдущих шагах) теряются и полностью заменяются «именем», «фамилией» и «электронной почтой».

Чтобы решить эту проблему, я попытался использовать «keepDirtyOnReinitialize», но, похоже, ничего не меняется, и я действительно не знаю, как заставить это работать на данный момент.

Это мой код, в котором я создаю форму и откуда я получаю информацию из Redux store:

 import React from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'

class Info extends React.Component {
    renderError({ error, touched }) {
        if (touched amp;amp; error) {
            return <div>{error}</div>
        }
    }

    renderInputField = ({ input, label, meta }) => {
        return (
            <div>
                <input {...input} type="text" placeholder={label} />
                {this.renderError(meta)}
            </div>
        );
    };

    onSubmit = (formValues) => {
        this.props.onSubmit(formValues)
    }

    render() {
        const { handleSubmit } = this.props
        return (
            <div>
                <form onSubmit={handleSubmit(this.onSubmit)}>
                    <div>
                        <Field
                            name="nome"
                            component={this.renderInputField}
                            label="Nome *"
                        />
                    </div>
                    <div>
                        <Field
                            name="cognome"
                            component={this.renderInputField}
                            label="Cognome *"
                        />
                    </div>
                    <div>
                        <Field
                            name="email"
                            component={this.renderInputField}
                            label="Email *"
                        />
                    </div>
                    <div>
                        <Field
                            name="azienda"
                            component={this.renderInputField}
                            label="Azienda"
                        />
                    </div>
                    <div>
                        <Field
                            name="citta"
                            component={this.renderInputField}
                            label="Città / CAP / Provincia"
                        />
                    </div>
                    <button>Visualizza</button>
                </form>
            </div>
        )
    }
}

const validate = formValues => {
    const errors = {}

    if (!formValues.nome) {
        errors.nome = "Aggiungi il nome"
    }

    if (!formValues.cognome) {
        errors.cognome = "Aggiungi il cognome"
    }

    if (!formValues.email) {
        errors.email = "Aggiungi l'email"
    } else if (!/^[A-Z0-9._% -] @[A-Z0-9.-] .[A-Z]{2,4}$/i.test(formValues.email)) {
        errors.email = 'Email non valida'
    }

    return errors
}


const mapStateToProps = (state) => {
    let initValues

    if (state.auth.isSignedIn) {
        initValues = {
            nome: state.auth.userProfile.ofa,
            cognome: state.auth.userProfile.wea,
            email: state.auth.userProfile.U3
        }
    }

    return {
        userData: state.auth,
        initialValues: initValues
    }
}

export default connect(mapStateToProps)(reduxForm({
    form: 'companyData',
    destroyOnUnmount: false,
    //forceUnregisterOnUnmount: true,
    enableReinitialize: true,
    keepDirtyOnReinitialize: false,
    validate
})(Info))
  

Это мои данные до того, как я войду в систему:

И это данные после того, как я войду в Google и восстановлю данные для заполнения полей

initialValues сбрасывает все данные и создает эти новые три, но, согласно документации Redux form, я должен иметь возможность сохранить предыдущие данные с помощью keepDirtyOnReinitialize, но это не работает.

Моя версия Redux Form: 8.1.0

Есть идеи?

Настройка let initValues = {} делает свое дело. Я не уверен, почему, но вот codesandbox, через 3 секунды повторная инициализация эмулируется, а остальные поля сохраняются => https://codesandbox.io/s/y2kyo20vox