如何解决由于Type'Element'无法分配给'string'.ts2345',React TypeScript无法对表进行排序
我在react组件中对表格进行排序时遇到问题。该问题与打字稿有关,并且突出显示了参数并显示错误,即:'类型'(name1:string,name2:string)=> number'的参数无法分配给类型'(a:Element,b:元素)=>数字”。参数'name1'和'a'的类型不兼容。不能将“元素”类型分配给“字符串”类型。
我的父组件:
const SearchWithDropdown: React.FC = () => {
const [countries,setCountries] = useState<Array<Country>>([])
const [value,setValue] = useState('')
const [filteredCountries,setFilteredCountries] = useState<Array<Country>>([])
const [isVisible,setIsVisible] = useState(false)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { value } = event.target
setValue(value)
changeResultVisibility(value)
}
const changeResultVisibility = (value: string) => {
setIsVisible(value.length >= 3)
}
useEffect(() => {
const fetchMyAPI = async () => {
let response = await fetch(url)
const json = await response.json()
setCountries(json)
}
fetchMyAPI()
},[])
useEffect(() => {
if (value.length >= 3 && countries.length > 0) {
setFilteredCountries(
countries
.filter((el: Country) => el.name.toLowerCase().includes(value))
)
}
},[value,countries])
console.log(filteredCountries)
return (
<div>
<input type="text" placeholder="Search..." value={value} onChange={handleChange}></input>
{isVisible ? (
filteredCountries.length > 0 ? (
<DropdownList filteredCountries={filteredCountries} value={value} />
) : (
<div>Not found!</div>
)
) : null}
</div>
)
}
和子组件:
interface DropdownListProps {
filteredCountries: Country[]
value: string
}
function sortData (name1: string,name2: string): number {
name1 = name1.toLowerCase()
name2 = name2.toLowerCase()
return name1 > name2 ? 1 : name2 > name1 ? -1 : 0
}
const DropdownList: React.FC<DropdownListProps> = ({ filteredCountries,value }) => {
const renderData = () =>
filteredCountries
.map((el) => (
<DropdownItem key={el.name}>
{reactStringReplace(el.name,value,(match: string,i: number) => (
<strong key={i}>{match}</strong>
))}
</DropdownItem>
))
.sort(sortData)
return <div>{renderData()}</div>
}
我的d.ts文件:
export interface Country {
name: string
}
我试图通过更改d.ts文件中的声明来解决问题,但这听起来有些愚蠢。我是TS的新手,所以也许我在这个地方进行排序的假设是错误的。也许应该在父组件中的filter方法之后... hmm ..
非常感谢您的帮助!
解决方法
您的排序函数似乎收到了 Element ,导致您使用 map 方法修改了国家(地区)数组并返回了 DropdownItem 数组。
因此,我建议在将数据传递给DropdownItem组件之前进行排序。
此外, filteredCountries 的项是具有属性名称({name:string})的对象,因此您的排序功能将接收该对象并应从中提取名称属性
function sortData (c1: Country,c2: Country): number {
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。