“CreateOptionActionMeta”类型上不存在属性“option”

如何解决“CreateOptionActionMeta”类型上不存在属性“option”

我在我的 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，getNewOptionData“在创建新选项时返回数据。用于显示值，并传递给onChange。 ”。但是，types for 'create-option' 操作不包括 option 传入的 getNewOptionData。

有人可以帮我吗？

解决方法

这可能只是 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)
            ...