javascript - 使用 TypeScript 反应选择异步 loadOptions
问题描述
我正在将现有的反应应用程序转换为打字稿,并且无法让反应选择异步loadOptions
正确解析为打字稿。
export type userType = {
loginId: string,
firstName: string,
lastName: string,
email: string,
}
<AsyncSelect
id={n.id}
name={n.id}
isClearable={true}
onBlur={handleBlur}
onChange={onChange}
placeholder={"Search by name, email or login ID"}
value={input}
className={input_class}
loadOptions={loadOptions}
/>
const loadOptions = async (inputText: string, callback: any) => {
axios.get(`myAPI_URI`)
.then((response) => {
let data: userType[] = response.data.results;
return data.map(result => {
return labelFormatter(result)
})
});
}
const labelFormatter = (i: any) => {
return {
label: i.loginId + ' - ' + i.firstName + ' ' + i.lastName + ' - ' + i.email,
value: i.loginId,
}
}
错误是
No overload matches this call.
Overload 1 of 2, '(props: Props<filteredOptionType, false, GroupTypeBase<filteredOptionType>> | Readonly<Props<filteredOptionType, false, GroupTypeBase<...>>>): Async<...>', gave the following error.
Type '(inputText: string, callback: any) => Promise<void>' is not assignable to type '(inputValue: string, callback: (options: readonly (filteredOptionType | GroupTypeBase<filteredOptionType>)[]) => void) => void | Promise<...>'.
Type 'Promise<void>' is not assignable to type 'void | Promise<readonly (filteredOptionType | GroupTypeBase<filteredOptionType>)[]>'.
Type 'Promise<void>' is not assignable to type 'Promise<readonly (filteredOptionType | GroupTypeBase<filteredOptionType>)[]>'.
Type 'void' is not assignable to type 'readonly (filteredOptionType | GroupTypeBase<filteredOptionType>)[]'.
Overload 2 of 2, '(props: Props<filteredOptionType, false, GroupTypeBase<filteredOptionType>>, context: any): Async<filteredOptionType, false, GroupTypeBase<...>>', gave the following error.
Type '(inputText: string, callback: any) => Promise<void>' is not assignable to type '(inputValue: string, callback: (options: readonly (filteredOptionType | GroupTypeBase<filteredOptionType>)[]) => void) => void | Promise<...>'. TS2769
我不明白我需要在哪里声明返回类型loadOptions
才能按预期工作。
解决方案
如果这是您的loadOptions
函数的实际代码,那么它有几个问题:
- 它不返回任何有意义的值(它返回
undefined
,并且考虑到async
它具有返回类型Promise<void>
) - 它没有副作用
从实际的角度来看,它根本没有任何用处,只是丢弃了响应数据。
要解决此问题,您可以采用以下方法之一:
- 返回有用的东西。然后你必须注释函数的返回类型:
import { OptionTypeBase } from "react-select/src/types"
const labelFormatter = (i: userType): OptionTypeBase => {
return {
label: i.loginId + ' - ' + i.firstName + ' ' + i.lastName + ' - ' + i.email,
value: i.loginId,
}
}
// add `return` keyword
const loadOptions = async (
inputText: string,
callback: any
): Promise<OptionTypeBase[]> => {
return axios.get(`myAPI_URI`)
.then((response) => {
let data: userType[] = response.data.results;
return data.map(result => {
return labelFormatter(result)
})
});
}
// or remove curly braces
const loadOptions = async (
inputText: string,
callback: any
): Promise<OptionTypeBase[]> =>
axios.get(`myAPI_URI`)
.then((response) => {
let data: userType[] = response.data.results;
return data.map(result => {
return labelFormatter(result)
})
});
- 或执行副作用:
// no `async` keyword. and using callback inside the function body
const loadOptions = (
inputText: string,
callback: (options: OptionTypeBase[]) => void
): void => {
axios.get(`myAPI_URI`).then((response) => {
let data: userType[] = response.data.results;
callback(data.map((result) => {
return labelFormatter(result);
}))
});
};
推荐阅读
- python - 如何将经过时间添加到列表中
- jquery - PUG+Express+Jquery+bootstrap
- ansible - 如何删除没有任何数据的空白行?
- swift - 符合更指定的协议扩展版本
- php - 使用 PHPUnit 将模拟对象传递给父构造函数时出现 TypeError
- javascript - 时刻时区将UTC更改为默认时区
- java - 使用 Prim 算法 Java 查找 MST
- java - 如何使用 IntelliJ IDE 将媒体资源正确添加到 (Java) Gradle 工件中?
- html - CSS 文件没有被拾取
- azure-devops - Azure Pipelines 小部件/报告以查看跨项目的管道状态