如何在不重置最終形式值的情況下更改組件狀態？

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

好的，所以我終於找到了導致此錯誤的原因，以防其他任何人遇到這種情況。

我不確定它會以這種方式表現的技術原因，但從本質上講，錯誤是我試圖通過狀態來控制並在提交之前手動將字段添加到表單數據中的字段也在提供給Form的initialValues對象中提供。

通過不在intialValue提供此值，objecti可以更改組件的狀態而不會影響這些值。 如果有人從最終形式的角度知道這種行為的確切原因，我會很高興，但至少現在我有了解決此問題的答案。