Question

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

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

为了解决此问题，我尝试使用“ 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表单版本为：8.1.0

有什么想法吗？

Answer 1

设置x<-c(1, 1)可以解决问题。我不知道为什么，但是这里有一个codeandbox，3秒钟后模拟了重新初始化并保留了其他字段=> https://codesandbox.io/s/y2kyo20vox

Redux表单-enableReinitialize会覆盖先前的数据，而keepDirtyOnReinitialize无效

1 个答案: