在使用带有formik的react-select时无法读取未定义的属性“类型”

Question

我正在使用react-select和formik构建一个带有自动填充文本框的表单。

<Formik
    initialValues={{
        assignedTo: task.assignedTo,
    }}
    onSubmit={(values) => {
        const updatedTask = { ...task, ...values };
        editTask(updatedTask);
    }}
    render={({ handleSubmit, handleChange, values }) => (
        <form>
            <Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
        </form>
    })
/>

它抛出一个错误

Cannot read property 'type' of undefined

如何解决这个问题并处理 formik 中的反应选择？

Answer 1

React-Select的onChange第一个参数是一个选项值，而formik的handleChange第一个参数是一个事件

React-Select: onChange(value, action) => void
Formik: handleChange(e: React.ChangeEvent<any>) => void

这就是您收到此类错误的原因。

这是我的方法。我希望这对你有帮助。

import React from 'react';
import { Formik, Form, Field } from 'formik';
import Select from 'react-select';

function SelectField(FieldProps) {
  return (
    <Select
      options={FieldProps.options}
      {...FieldProps.field}
      onChange={option => FieldProps.form.setFieldValue(FieldProps.field.name, option)}
    />
  )
}

export default function FormikReactSelect(props) {
  const options = [
    { value: '1', label: 'White' },
    { value: '2', label: 'Yellow' },
  ];
  return (
    <Formik>
      {formProps => (
        <Form>
          <Field name='SelectColor' options={options} component={SelectField}/>
        </Form>
      )}
    </Formik>
  );
}

Answer 2

如前所述，React-Select 上的 onChange 处理程序与 formik 上的 handleChange 处理程序不同。 我从官方 formik.org 文档中得出这一点...

注意，我不会像

{...field}

那样将字段值分散到反应选择表单中，因为这是我们要解决的问题。字段值包含来自 formik 的 onChange 处理程序，我们打算将其删除。

相反，我只将

field.name

分配给 name 属性，然后使用 useField 帮助程序提供的

setValue

处理程序手动设置值。 这对我有用。

import { useField, Formik } from 'formik';
import Select from 'react-select';

export default function SelectInput(props) {
  const [field, meta, helpers] = useField(props);

  const options = [
    { value: '1', label: 'White' },
    { value: '2', label: 'Yellow' },
  ];

  return (
    <Formik>
      <Select
        options={options}
        onChange={(option) => helpers.setValue(option?.value)}
        name={field.name}
        placeholder={props.placeholder}
      />
      {meta.touched && meta.error ? <div>{meta.error}</div> : null}
    </div>
  );
}

Answer 3

我遇到了同样的错误，但找到了解决方案

试试这个

onChange={e => formik.setFieldValue('language', e[0].value)}

.setFieldValue 是一个 Formik 方法，需要两个参数，第一个是 field 名称，即您要更新的值，第二个是 value

e 将是一个包含一个或多个选定对象的数组，在我的例子中，只有一个，因此我使用 e[0] 访问唯一的对象，然后从该对象绑定所需的属性，在我的例子中是 e[0].value

Answer 4

这是我非常简单的解决方案：

<Select
    placeholder={`Select Flavor`}
    options={[
      { value: `1`, label: `Chocolate` },
      { value: `2`, label: `Strawberry` },
      { value: `3`, label: `Vanilla` },
    ]}
    name="flavor"
    onChange={(selectedOption, _) =>
      setFieldValue(`flavor`, selectedOption)
    }
    onBlur={handleBlur}
    value={values.flavor}
  />

工作完美。

Answer 5

就我而言，如果我不在 selectedOption 之后放置

value

，我将在对象中收到所选数据而不是字符串。另外，要显示数据列表，我需要像这样调整

value

的

Select

属性

value={loadOptionsCategory.find(option => option.value === values.category_id) || null}

<Select
  name="category_id"
  className={touched.category_id && errors.category_id
                                      ? "error"
                                      : null}
  onChange={selectedOption => {
  setFieldValue("category_id", selectedOption.value);}}                                    
  options={loadOptionsCategory}                                  
  placeholder='Select / Search a category'
  value={loadOptionsCategory.find(option => option.value === values.category_id) || null} 
/>