reactjs - 由于 'Type '元素，React TypeScript无法对表进行排序元素'无法分配给 'string' .ts(2345)'类型

Question

我在对React组件中的表进行排序时遇到问题。该问题与 typescript 有关，并且突出显示了参数并显示错误，即:'类型'(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的新手，所以也许我在这个地方进行排序的假设是错误的。也许应该在父组件中的过滤方法之后。
非常感谢您的帮助!

Answer 1

看来您的排序函数接收到元素，导致您使用 map 方法修改了国家数组，并返回了 DropdownItem 的数组。
因此，我建议在将数据传递给DropdownItem组件之前进行排序。
另外，filteredCountries 的项也是具有属性名称({name:string})的对象，因此您的排序功能将接收该对象并应从中提取name属性

function sortData (c1: Country, c2: Country): number {