如何一次设置所有 formik 值？

Question

我有一个 formik 表单用于编辑来自 API 端点的数据，目前我正在像这样重新初始化 useEffect 挂钩中的值

React.useEffect(() => {
    initialValues.first_name = address?.first_name;
    initialValues.last_name = address?.last_name;
    initialValues.middle_name = address?.middle_name;
    initialValues.label = address?.label;
    initialValues.description = address?.description;
  }, [address, initialValues]);

因为表单有很多值，useEffect 钩子变得冗长而且看起来也不干净，我试图找到一种方法在一行中完成它，所以它不会得到一大块代码。

Answer 1

这是我的想法，你可以使用ramda中的pick，当fromfield添加新列时你只需要将标签推送到formDataLabels，希望对你有用。

import {pick} from 'ramda';

// ... 

React.useEffect(() => {
    const formDataLabels = ['first_name', 'last_name', 'middle_name', 'label', 'description'];
    const updateData = pick(formDataLabels, address);
    initialValues = {
        ...initialValues,
        ...updateData,
    };
}, [address, initialValues]);

Answer 2

所以当我使用 formik.setValues 时它起作用了，因为它 returns 是一个承诺所以我把它放在一个异步函数中。 formik.setValues

  React.useEffect(() => {
    async function setInitialValues() {
      if (address) await formik.setValues(address, false);
    }
    setInitialValues();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [address]);

如何一次设置所有 formik 值？

How to set all formik values at once?

reactjs

formik