如何在不重置最终形式值的情况下更改组件状态？

Question

我有一个组件，其中包含一个用 react-final-form 制作的表单；所有输入字段都像在我的所有其他表单中一样工作正常，但是，我有一个更改组件状态所需的自定义输入，然后在 handleSubmit 中我将该值添加到表单数据中。这基本上是自定义输入。

但是，当我更新组件的状态时，只要更新状态，它就会重置其他输入字段中的任何用户输入。为什么要这样做，或者我在这里缺少什么，以便更改组件状态不会重置其他输入中的值？我知道我以前见过它有效，但我无法区分。

这是我的表格的简化版本

const MyForm = () => {
    const [period,setPeriod] = useState(new Date())

    const handleSubmit = (data) => {
        console.log(data)
    }

    const handleSelectPeriod = (month) =>{

        setPeriod(month)
    }

    const initialValues = {
        period,
        package_id:context.inheritData.package_id,
        balance:0.00
    }
    return (
        <div>

            <Form
                onSubmit={handleSubmit}
                validate={values => validate(values, schema())}
                initialValues={initialValues}
            >
                    {({handleSubmit})=>(
                            <div>
                                <form onSubmit={handleSubmit}>
                                <div className={'form-group'}>
                                    <label htmlFor="name">Name/label>
                                    <InputField name={'name'} />

                                </div>
                                    <div className={'form-group'}>
                                        <label htmlFor="slug">Slug</label>
                                        <InputField name={'slug'} />
                                    </div>
                                    <div className={'form-group'}>
                                        <MonthYearContainer selectMonth={handleSelectPeriod}/>
                                    </div>
                                    <div className={'form-group'}>
                                        <label htmlFor="balance">Balance Inicial</label>
                                        <InputField name='balance' type={'number'} step={0.01}/>
                                    </div>
                                    <FormButton isLoading={loading} text={'Crear'} textLoading={'Creando Condominio'}/>

                                </form>

                            </div>
                        )}
            </Form>
        </div>
    )
}

预期的行为是让用户更改组件状态而不重置他们已经在其他字段中输入的任何内容。

Answer 1

好的，所以我终于找到了导致此错误的原因，以防其他人遇到这种情况。

我不确定这种行为的确切技术原因，但本质上，错误是我试图通过状态控制并在提交前手动添加到表单数据的字段也在 initialValues 中提供提供给 Form 的对象。

通过不在 intialValue 对象中提供此值，我可以在不影响值的情况下更改组件的状态。如果有人从最终形式的角度知道这种行为的确切原因，我会很高兴，但至少现在我有了解决这个问题的答案。

Answer 2

在 React 最终形式中使用 keepDirtyOnReinitialize。

https://final-form.org/docs/final-form/types/Config

如何在不重置最终形式值的情况下更改组件状态？

How change component state without resetting final-form values?

state

reactjs

final-form

react-final-form