从表单外的异步函数更新 Formik 字段答案

【问题标题】：Update Formik field from asynchronous function outside form从表单外的异步函数更新 Formik 字段
【发布时间】：2022-11-25 19:15:04
【问题描述】：

我有一个实现简单 Formik 表单的组件。该组件还具有通过单击 Leaflet JS 地图生成的事件的侦听器。我希望能够更新纬度和液化天然气每当事件处理程序被调用时，这些字段都可以通过单击地图而不是直接输入值来选择性地填充。

import React, { useEffect } from 'react';
import { Formik, Form, Field } from 'formik';


const FormComponent = () => {
    const onMapClick = e => {
        console.log(e.detail.lat, e.detail.lng);
    };

    useEffect(() => {
        document.addEventListener('map:click', onMapClick);

        return () => {
            document.removeEventListener('map:click', onMapClick);
        };
    }, []);

    return (
        <Formik
            initialValues={{ username: 'guest', lat: 50.447243, lng: 30.524933 }}
            onSubmit={values => { console.log(values); }}
        >
            {() => (
                <Form id="test">
                    <Field type="text" name="username" />
                    <Field type="text" name="lat" />
                    <Field type="text" name="lng" />
                    <button type="submit">
                        Submit
                    </button>
                </Form>
            )}
        </Formik>
    );
};

export default FormComponent;

我遇到过 Formik setFieldValue 函数，但这似乎只能从表单中访问。同样，我不能在表单函数中使用 UseEffect。

我通过更改初始值并使用 enableReinitialize 取得了一些成功，但这会重置其他字段，除非我跟踪所有字段并在每次更改时更新初始值。

实现这一目标的推荐方法是什么？我应该补充一点，该代码是一个经过精简的示例。真正的形式有更多的领域。

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

这就是我要做的。

想象一下，您有带表单的组件、带地图的组件和包含这两者的一些父组件。

我会在父组件中使用一些 useState 来处理所选纬度和经度的变化，并将这些数据提供给我的表单。

然后在表单中我将使用 useEffect，因此只要这些数据发生更改，它就会在表单中 setFieldValue。

所有这些东西看起来像那样（抽象示例）：父组件

const [coords, setCoords] = useState(null)

return (
  <>
    <Form coords={coords} />
    <Map onChange={setCoords} />
  </>
)

形式

useEffect(() => {
  if(coords !== null) {
    setFieldValue("lat", coords.lat)
    setFieldValue("lng", coords.lng)
  }
}, [coords])

这应该有效，因为 setFieldValue 可以在每个时刻为字段设置值，即使在初始化之后也是如此。我不确定您在使用 useEffect 和 setFieldValue 时遇到了什么问题，所以如果我的回答对您没有帮助，请提供更多代码示例

【讨论】：