默認值不適用於 react-select 和 Formik

Question

我已經用 react-select 和 Formik 編寫了代碼。 我將useField()用於選擇組件，但是當我嘗試更改默認值時，我得到了空的選定值。

const SelectField = ({ name, ...selectProps }) => {
  const [field, meta, helpers] = useField(name)

  return (
    <Select
      value={field.value}
      onChange={(v) => helpers.setValue(v)}
      onBlur={() => helpers.setTouched(true)}
      {...selectProps}
    />
  )
}

那么這是我對該組件的實現

<SelectField
name="category"
defaultValue={values.category.map((c) => {
  console.log(c)
  return {
    value: c,
    label: c,
  }
})}
closeMenuOnSelect={false}
components={animatedComponents}
isMulti
options={categories.map((c) => {
  return {
    value: c.name,
    label: c.name,
  }
})}
/>

假設 values.category 是來自類別數據的某個值。

Answer 1

將該選擇的值更改為field.defaultValue

const SelectField = ({ name, ...selectProps }) => {
  const [field, meta, helpers] = useField(name)

  return (
    <Select
      value={field.defaultValue}
      onChange={(v) => helpers.setValue(v)}
      onBlur={() => helpers.setTouched(true)}
      {...selectProps}
    />
  )
}