reactjs - Formik - 为选择框设置动态值

Question

当用户选择国家时，我有一个包含国家和州字段的地址表单，我想获取状态列表表单后端并更新状态选择框值列表。

我已经参考了下面的文章来创建表单。 https://medium.com/@nphivu414/build-a-multi-step-form-with-react-hooks-formik-yup-and-materialui-fa4f73545598 在此处输入图像描述

Answer 1

首先，您可以设置如下初始值

const initialValues = {
    otherValues: '',
    address: {
        line_1: '',
        zip_code: '',
        city: '',
        state: '',
    },
};

然后基于此初始值，您可以启动如下状态：

const [initialAddress, updateInitialAddress] = useState(initialValues);

之后，在 UseEffect 中调用 API 获取地址，您可以像下面这样更新状态：

 //say your response set in "res" variable

 updateInitialAddress({
    otherValues: res.other_values,
    address: {
      line_1: res.line_1,
      zip_code: res.zip_code,
      city: res.city,
      state: res.state,
      },
  });

在formik中，您可以设置：

initialValues={initialAddress}

如果您的 Formik Select Dropdown 与您初始化的名称相同，那么它将在下拉列表中自动选择。

谢谢