排查 React-Select 异步集成中的 TypeScript 错误

Question

对于过去几天遇到的问题，我非常感谢您的帮助。

我目前正在使用名为 react-select 的第三方库来创建一个选择下拉列表，该下拉列表具有在输入文本时向 API 发送请求的功能。

下面是我正在使用的代码：

import { useEffect, useState } from 'react';

import AsyncSelect from 'react-select/async';

import categories from '@/data/categories';

import groupCategoriesByType from '../utils/groupCategoriesByType';
import getCategories from '../api/getCategories';

const selectStyles = {
  menu: (base) => ({ ...base, zIndex: 20 }),
};

const loadOptions = async (
  inputValue: string,
  callback: (
    options: {
      label: string;
      options: string | { value: string; label: string }[];
    }[]
  ) => void
) => {
  const response = await getCategories(inputValue);
  const groupedCategories = groupCategoriesByType(response);
  callback(groupedCategories);
};

function Category() {
  const groupedCategories = groupCategoriesByType(categories);
  return (
    <AsyncSelect
      defaultOptions={groupedCategories}
      loadOptions={loadOptions}
      styles={selectStyles}
    />
  );
}

export default Category;

我遇到的问题出现在 loadOptions={loadOptions} 行，特别是 TypeScript 错误，并显示以下消息：

Type '(inputValue: string, callback: (options: { label: string; options: string | {    value: string;    label: string;}[]; }[]) => void) => Promise<void>' is not assignable to type '(inputValue: string, callback: (options: OptionsOrGroups<{ label: string; options: string | { value: string; label: string; }[]; }, GroupBase<{ label: string; options: string | { value: string; label: string; }[]; }>>) => void) => void | Promise<...>'.
  Type 'Promise<void>' is not assignable to type 'void | Promise<OptionsOrGroups<{ label: string; options: string | { value: string; label: string; }[]; }, GroupBase<{ label: string; options: string | { value: string; label: string; }[]; }>>>'.
    Type 'Promise<void>' is not assignable to type 'Promise<OptionsOrGroups<{ label: string; options: string | { value: string; label: string; }[]; }, GroupBase<{ label: string; options: string | { value: string; label: string; }[]; }>>>'.
      Type 'void' is not assignable to type 'OptionsOrGroups<{ label: string; options: string | { value: string; label: string; }[]; }, GroupBase<{ label: string; options: string | { value: string; label: string; }[]; }>>'.ts(2322)

此外，这是我的 getCategories(...) 函数，负责进行后端调用以检索数据：

import api from '@/config/api';

async function getCategories(term: string) {
  try {
    const response = await api.post('/get_results', { searchTerm: term });
    if (response.status === 200) {
      return response.data;
    }
  } catch (error) {
    console.error('Error:', error);
  }
}

export default getCategories;

最后，这是我的

groupCategoriesByType(...)

函数，它采用

[{ value: string; label: string; type: string; }]

形式的对象数组，并根据它们的类型对它们进行分组，以产生以下形式的输出：

{ label: string; options: [{ value: string; label: string }] }

import { CategoryType } from '@/types';

function groupCategoriesByType(categories: CategoryType[]) {
  // Create an object to store the grouped categories.
  const groupedCategories: {
    label: string;
    options: { value: string; label: string }[];
  } = {
    label: '',
    options: [],
  };

  // Group categories by the 'type' attribute.
  categories.forEach((category) => {
    const { type, ...rest } = category;

    if (!groupedCategories[type]) {
      groupedCategories[type] = [];
    }

    groupedCategories[type].push(rest);
  });

  // Convert the 'groupedCategories' object into the desired format.
  const result = Object.entries(groupedCategories).map(([label, options]) => ({
    label,
    options,
  }));

  // Return the 'result' array.
  return result;
}

export default groupCategoriesByType;

PS：我也有一个

CategoryType

：

export type CategoryType = {
  value: string;
  label: string;
  type: string;
};

这是我正在关注的react-select文档链接到的演示，您可能会发现有帮助： https://codesandbox.io/s/qqy65g?module=/example.tsx

Answer 1

我认为您不需要在 loadOptions 函数中使用回调参数，因为该函数预计会返回一个解析为选项的 Promise。 getCategories 函数已经返回 Promise，因此您可以直接从 loadOptions 中返回 groupedCategories。试试这个，看看是否有效，

const loadOptions = async (inputValue: string) => {
  const response = await getCategories(inputValue);
  const groupedCategories = groupCategoriesByType(response);
  return groupedCategories;
}