Я новичок в React, и у меня есть вопрос относительно передачи функций в состоянии. У меня есть пара «функций сортировки» в моей папке util, которые выглядят следующим образом:

 export const sortColdestSummerCountries = (filteredCountries) => {
  return filteredCountries.sort(
    (a, b) => a.avsummertemp20802099 - b.avsummertemp20802099
  );
}; 
 

и несколько других:
sortHighestSummerTemp, sortLargestIncreaseHotDays, sortColdestSummerCountries, sortMostColdDays, sortWorstAffectedCountries которые в значительной степени выглядят похожими. Я использую их для сортировки своих данных по запросам пользователей, и если я sortHighestSummerTemp(filteredCountries) оборачиваю свои данные, это работает как шарм.

Теперь проблема: поскольку в конечном итоге у меня будет более 10 фильтров, для меня имеет смысл создать глобальный const [queryFilter, setQueryFilter] = useState({ sortHighestSummerTemp}); , который затем реагирует на const onChangeQueryFilter = (e) => { setQueryFilter(e.target.value); };

Тем не менее, при попытке queryFilter (filteredCountries) терминал показывает мне "queryFilter is not a function" , когда я его фильтрую? Это все та же функция sortHighestSummerTemp, верно или чего мне здесь не хватает? Правильно ли я суммирую эту проблему?

Надеюсь, это было ясно, и вы понимаете, что я пытаюсь сделать. Может ли кто-нибудь объяснить мне, что происходит и какова наилучшая практика здесь?

ОБНОВЛЕНИЕ: Prateek предложил следующее:

function sortBy(filteredCountries, sortKey) { return [...filteredCountries].sort((a, b) => a[sortKey] - b[sortKey]); } const [queryFilter, setQueryFilter] = useState({ sortMostHotDays, }); const filteredData = sortBy(filteredCountries, sortMostHotDays); console.log(filteredData);

Это не работает, он по-прежнему показывает старые данные (filteredCountries), но фильтрация не работает. У кого-нибудь есть подсказка?

1-й подход

• Вы помещаете строку в свое состояние. Может быть, лучше, если вы используете объект с функциями сортировки и используете пользовательский ввод в качестве ключа к объекту функций сортировки

 const onChangeQueryFilter = (e) => { setQueryFilter(e.target.value); };


const sortingFns = {
  "temp": sortHighestSummerTemp, 
  "hot": sortLargestIncreaseHotDays, 
  "summer": sortColdestSummerCountries, 
  "cold": sortMostColdDays,
   .....
}

const sortedData = sortingFns[queryFilter](data);
 

2-й подход

• Гораздо лучше, если вы передадите параметр сортировки на свою фабрику функций сортировки.

 function sortBy(data, sortKey) {
  return [...data].sort((a, b) => a[key] - b[key])
}

// the query filter should respond to the key on which you should sort the data.
const [queryFilter, setQueryFilter] = React.useState('');
const filteredData = sortBy(data, queryFilter);