Блог

Я написал код с помощью react-select и Formik. Я использовал useField() для компонента select, но когда я попытался изменить значение по умолчанию, я получил пустое выбранное значение.

 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 — это некоторое значение из данных категорий.

измените значение этого выбора на 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}
    />
  )
}