Redux 表单 - enableReinitialize 覆盖以前的数据，keepDirtyOnReinitialize 不起作用

Question

我创建了一个向导联系表单，在某个步骤中，我有一个“使用 Google 登录按钮”，如果用户使用 Google 登录，那么 CF 的某些字段将使用 Google 数据填写（姓名、姓氏、电子邮件）。

一切正常，但我注意到一旦用户登录并填写了字段，表单的先前数据（我在前面的步骤中获得的数据）会丢失并完全替换为“姓名”、“姓氏” ”和“电子邮件”。

为了解决这个问题，我尝试使用“keepDirtyOnReinitialize”，但似乎没有任何改变，我现在不知道如何让它工作。

这是我创建表单和从 Redux 商店获取信息的代码：

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 && 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 表单文档，我应该能够使用 keepDirtyOnReinitialize 保留以前的数据，但它不起作用。

我的 Redux Form 版本是：8.1.0

有什么想法吗？

Answer 1

设置let initValues = {} 可以解决问题。我不知道为什么，但这是一个代码框，3 秒后重新初始化被模拟，其他字段被保留 => https://codesandbox.io/s/y2kyo20vox