如何修复 TypeScript 中的“没有重载匹配此调用”错误？ SelectList onSelect 属性

Question

我目前正在团队中开发 React Native 应用程序。我一直在尝试在应用程序的页面上实现 SelectList，该页面调用 handleSelection 函数，该函数获取所选值并将其传递给选择时的函数。我的团队最近决定转向 TypeScript 文件而不是 Javascript 文件。 SelectList 在 Javascript 版本中工作，但现在我们切换到 Typescript，SelectList 的 onSelect 属性抛出“没有重载匹配此调用”错误，我不确定该怎么办。 handleSelection 函数应该过滤全局列表，然后该列表将显示在页面的下方。

完整错误如下：

没有重载与此调用匹配。 重载第 1 个（共 2 个）“(props: SelectListProps | Readonly): SelectList”，出现以下错误。 类型“(selected:any) => void”不可分配给类型“() => void”。 目标签名提供的参数太少。预计 1 或更多，但得到 0。 重载第 2 个（共 2 个）“(props: SelectListProps, context: any): SelectList”，出现以下错误。 类型“(selected:any) => void”不可分配给类型“() => void”.ts(2769) index.d.ts(79, 5)：预期类型来自属性“onSelect”，该属性在类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上声明 index.d.ts(79, 5)：预期类型来自属性“onSelect”，该属性在类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly”上声明

我的 SelectList 代码如下：

import { SelectList } from 'react-native-dropdown-select-list';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const [selected, setSelected] = React.useState("");

export default function ClientAp(){

const filterOption = [
        {key: 'All', value: 'All'},
        {key: 'Today', value: 'Today'},
        {key: 'This Week', value: 'This Week'},
        {key: 'This Month', value: 'This Month'}
    ]

const handleSelection  = (key) => {
        if(key == 'All Upcoming')
        {
            //filter by upcoming appointments
        }
        else if(key == 'Today')
        {
            //filter by appointments today
        }
        else if(key == 'This Week')
        {
            //filter by appointments this week
        }
        else if(key == "This Month")
        {
           //filter by appointments this month
        }

}

return(
    <>
       {/* more stuff up here*/}

       <View style = {styles.dropdowncont}>
                <SelectList
                    setSelected = {setSelected}
                    data = {filterOption}
                    maxHeight = {300}
                    boxStyles = {{backgroundColor:'white'}}
                    dropdownStyles = {{backgroundColor:'white'}}
                    search = {false}
                    defaultOption = {{key: 'All', value: 'All'}}
                    onSelect = {(selected) => handleSelection(selected)} {/* error on this line */}
                />
        </View>

        {/* more stuff down here */}

    </>
);
}
const styles = StyleSheet.create({
        dropdowncont: {
        padding: 16
}

我尝试添加一个返回到handleSelection 函数，该函数不返回任何内容。我还尝试向所选变量添加变量类型，如下所示：（所选：字符串）。我一直在尝试改变一切的类型。尽管如此，修复这一错误仍没有任何进展。

如果需要更多代码来解决这个问题，我很乐意效劳。任何帮助将不胜感激！

Answer 1

onSelect

没有任何参数，如错误所示。

Type '(selected: any) => void' is not assignable to type '() => void

在

handleSelection

中使用

setSelected

代替，如下所示：

const handleSelection  = (key) => {
    setSelected(key)
    if(key == 'All Upcoming')
...

}

...

<SelectList
    setSelected = {handleSelection}
    data = {filterOption}    
    maxHeight = {300}
    boxStyles = {{backgroundColor:'white'}}
    dropdownStyles = {{backgroundColor:'white'}}
    search = {false}
    defaultOption = {{key: 'All', value: 'All'}}
/>