reactjs - React.js：如何根据 API 调用正确排序？

Question

我正在学习React.js并且第一次遇到这个。我正在获取API 数据，并希望能够根据卡片本身的属性对数据进行排序。所以，我使用Switch来处理多重排序。当我第一次单击时，它似乎可以工作，但是当我再次单击另一个按钮时，应用程序停止响应并且没有错误以找出问题所在。它只是停止工作。我也尝试过useMemo ，但没有区别。任何帮助将不胜感激。这是我的代码结构：

import { useState, useEffect} from 'react'

export default function useCountries(search: string, activeFilter: any) {
  const [data, setData] = useState<any[]>([])
  const [savedCountries, setSavedCountries] = useState<any[]>([])
  const fetchData = () => {
    fetch('https://restcountries.eu/rest/v2/all')
      .then((res) => res.json())
      .then((result) => {
        setData(result)
        setSavedCountries(result)
      })
      .catch((err) => console.log(err))
  }
  useEffect(() => {
    const result = [...savedCountries].filter((item: any) =>
      item.name.toLowerCase().includes(search.toLowerCase())
    )
    setData(result)
  }, [search, savedCountries])

  useEffect(() => {
    fetchData()
  }, [])

  const sortCountry = (countries: any) => {
      const filter = activeFilter.toLowerCase()
      switch (filter) {
        case 'flag':
          const sortByFlag = [...countries].sort((a: any, b: any) =>
            a.flag.localeCompare(b.flag)
          )
          setData(sortByFlag)
          break
        case 'region':
          const sortByRegion = [...countries].sort((a: any, b: any) =>
            a.region.localeCompare(b.region)
          )
          setData(sortByRegion)
          break
        case 'language':
          const sortByLanguages = [...countries].sort((a: any, b: any) =>
            a.languages[0].name.localeCompare(b.languages[0].name)
          )
          setData(sortByLanguages)
          break
        case 'population':
          const sortPopulation = [...countries].sort(
            (a: any, b: any) => a.population - b.population
          )
          setData(sortPopulation)
          break
        case 'name':
          const sortByName = [...countries].sort((a: any, b: any) =>
            a.name.localeCompare(b.name)
          )
          setData(sortByName)
          break
      }
    }

  useEffect(() => {
    sortCountry(data)
  }, [activeFilter, data, sortCountry])

  return [data]
}

onClick 组件

import React from 'react'

/* import { HeaderProps } from '../../types'
 */
import './Header.scss'

export default function Header({ setActiveFilter }: any) {
  return (
    <div className="header">
      <ul className="HeadTableRow">
        <li>
          <button onClick={() => setActiveFilter('flag')}>Flag</button>
        </li>{' '}
        <li>
          <button onClick={() => setActiveFilter('name')}>Name</button>
        </li>
        <li>
          <button onClick={() => setActiveFilter('language')}>Language</button>
        </li>
        <li>
          <button onClick={() => setActiveFilter('population')}>
            Population
          </button>
        </li>
        <li>
          <button onClick={() => setActiveFilter('region')}>Region</button>
        </li>
      </ul>
    </div>
  )
}

标签： reactjstypescriptsorting