“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，getNewOptionData“在创建新选项时返回数据。用于显示值，并传递给onChange。”。但是，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)
            ...