![](/img/trans.png)
[英]Trigger loadOptions in react-select/async once option has been click
[英]react-select async loadOptions with TypeScript
我正在將現有的 React 應用程序轉換為 typescript,我無法讓react-select async loadOptions
正確解析為 typescript。
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
function 的實際代碼,那么它有幾個問題:
undefined
,並且考慮到它具有返回類型Promise<void>
的async
)從實際的角度來看,它根本沒有任何用處,只是丟棄了響應數據。
要解決此問題,您可以采用以下方法之一:
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);
}))
});
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.