属性 'option' 在类型 'CreateOptionActionMeta' 上不存在

Question

我在我的 Typescript 项目中使用 react-selects 的 CreatableSelect 组件，但我遇到了如下所示的类型问题。

我的 CreatableSelect 组件如下所示：

<CreatableSelect
  isMulti
  isLoading={isLoading}
  getNewOptionData={(value, label) => ({
    value: slugify(value),
    label,
  })}
  onChange={(selectedValues, actionMeta) => {
    onFoodsSelectChange(selectedValues, actionMeta);
  }}
  options={options}
  value={selected}
/>

并且根据 the documentation, the getNewOptionData "Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.". However, the types for 'create-option' 操作不包括 getNewOptionData 传入的 option。

有人能帮帮我吗？

Answer 1

这可能只是 create-option 动作元的错误类型定义。但是虽然 CreateOptionActionMeta type 没有 option 字段，但它的运行时值有它。而且它也可以作为 selectedValues 参数的最后一个元素访问。

因此，您可以忽略错误的输入并断言您更了解的打字稿：

type FoodOption = { value: string, label: string }

const onFoodsSelectChange = (
    selectedValues: OptionsType<FoodOption>,
    actionMeta: ActionMeta<FoodOption>
) => {
    switch (actionMeta.action) {
        case 'create-option': {
            const option = (actionMeta as unknown as { option: FoodOption }).option
            ...

或者使用selectedValues的最后一个元素：

const onFoodsSelectChange = (
    selectedValues: OptionsType<FoodOption>,
    actionMeta: ActionMeta<FoodOption>
) => {
    switch (actionMeta.action) {
        case 'create-option': {
            const [option] = selectedValues.slice(-1)
            ...

属性 'option' 在类型 'CreateOptionActionMeta' 上不存在

Property 'option' does not exist on type 'CreateOptionActionMeta'

typescript

reactjs

react-select