由于Type'Element'无法分配给'string'.ts2345'，React TypeScript无法对表进行排序

编程问答 2022-08-15

问题描述

我在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 {
compiler-errorsreactjsreactjstypescripttypescript