Semantic UI React+TS严格模式下Dropdown选项函数的正确返回类型问题

问题根本原因 #

<Form.Select>的options属性只接受DropdownItemProps[]类型的数组值，不接受任何函数类型，你的所有报错本质上都是给options传了函数而不是数组：

1. 写法options={()=>{getOptions()}}中，箭头函数使用花括号包裹逻辑但没有写return语句，返回值类型为void，和要求的数组类型不匹配
2. 写法options={()=>getOptions()}/options={getOptions}中，传入的是函数本身，类型为() => DropdownItemProps[]，依然不符合数组类型要求

解决方案 #

情况1：getOptions为同步函数 #

直接执行函数传入返回值即可：

<Form.Select options={getOptions()} />

情况2：getOptions为异步接口请求（你的场景属于该情况） #

需要配合React状态管理存储接口返回的选项数组，再传给组件：

代码示例

首先修改异步的getOptions函数：

import { DropdownItemProps } from 'semantic-ui-react';

// 异步函数返回Promise包裹的选项数组
const getOptions = async (): Promise<DropdownItemProps[]> => {
  const options = new Array<DropdownItemProps>();
  // 这里写你的接口请求逻辑，请求成功后将返回数据转换为DropdownItemProps格式，每个选项至少需要包含text（显示文本）、value（选项值）两个字段
  return options;
}

组件内使用useState存储选项、useEffect触发接口请求：

import { useState, useEffect } from 'react';
import { Form } from 'semantic-ui-react';

const FormComponent = () => {
  // 初始化选项数组为空
  const [selectOptions, setSelectOptions] = useState<DropdownItemProps[]>([]);

  // 组件挂载时异步拉取选项
  useEffect(() => {
    const loadOptions = async () => {
      const result = await getOptions();
      setSelectOptions(result);
    };
    loadOptions();
  }, []);

  return (
    <Form>
      {/* 直接传入状态中存储的数组即可 */}
      <Form.Select options={selectOptions} />
    </Form>
  );
};

内容的提问来源于stack exchange，提问作者Yechiam Weiss