Formik - 为选择框设置动态值

Question

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

我参考了下面的文章来创建表单。 https://medium.com/@nphivu414/build-a-multi-step-form-with-react-hooks-formik-yup-and-materialui-fa4f73545598enter image description here

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 与您初始化的名称相同，那么它将在下拉列表中自动选择。

谢谢