从 react-select 和 typescript 中选择组件

Question

我正在尝试将来自 react-component 的 Select 组件与 typescript 一起使用，但出现了一些过载错误。 在我的代码片段下方：

type SelectedProps = {
  name: string;
  label: string;
  placeholder: string;
  readOnly: boolean;
  options: {
    label: string;
    value: string
  }
}

export function SelectFormik({ label, options, ...rest }: SelectedProps): ReactElement<any> {
  const [field, meta, helpers] = useField(rest) // <-- Had set some type here I guess

  const handleChange = (selected: SelectedProps["options"], action) => {
    helpers.setValue(selected)
  }


  return (
    <Box mb="2">
      <FormControl>
        { label && <FormLabel htmlFor={rest.name}>{label}</FormLabel>}
        <Select
          {...rest}
          {...field}
          options={options}
          onChange={handleChange}
          styles={selectStyles}
          isClearable
          isSearchable
        />

        <FormErrorMessage isInvalid={!!meta.error}>{meta.error}</FormErrorMessage>
      </FormControl>
    </Box>
  )
}

和我得到的错误：

(alias) class Select<OptionType extends OptionTypeBase = { label: string; value: string; }, T extends SelectBase<OptionType> = SelectBase<OptionType>>
import Select
No overload matches this call.
  Overload 2 of 2, '(props: Pick<Props<{ label: string; value: string; }>, ReactText> & import("/Users/marcos/Desktop/fitup-next/node_modules/@types/react-select/src/stateManager").Props<{ ...; }> & import("/Users/marcos/Desktop/fitup-next/node_modules/@types/react-select/src/Select").Props<...>, context?: any): StateManager<...>', gave the following error.
    Type '{ label: string; value: string; }' is not assignable to type 'OptionsType<{ label: string; value: string; }> | GroupedOptionsType<{ label: string; value: string; }> | undefined'.
      Type '{ label: string; value: string; }' is not assignable to type 'GroupedOptionsType<{ label: string; value: string; }>'.
  Overload 2 of 2, '(props: Pick<Props<{ label: string; value: string; }>, ReactText> & import("/Users/marcos/Desktop/fitup-next/node_modules/@types/react-select/src/stateManager").Props<{ ...; }> & import("/Users/marcos/Desktop/fitup-next/node_modules/@types/react-select/src/Select").Props<...>, context?: any): StateManager<...>', gave the following error.
...

我阅读了错误，但我无法理解，如果您能帮助我，我将不胜感激。 谢谢各位。 抱歉，jr 开发人员是 jr 开发人员，kkkk。

Answer 1

您的接口SelectedProps将options定义为单个选项对象，而您的意思是它是一个选项对象数组。 这就是您发布的特定错误的来源。

type SelectedProps = {
  name: string;
  label: string;
  placeholder: string;
  readOnly: boolean;
  options: {
    label: string;
    value: string;
  }[];
}

传递给onChange回调的value的类型似乎也是any ，所以我不确定该value实际上是什么。 也许在useField上设置泛型将有助于改进它。