在 React 中将函数传递给 State

Question

我是 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）但过滤不起作用。有人有线索吗？

Answer 1

第一种方法

• 您正在将字符串放入您的状态。如果您使用具有排序功能的对象并使用用户输入作为排序功能对象的键，也许会更好

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


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

const sortedData = sortingFns[queryFilter](data);

第二种方法

• 如果将排序参数传递给排序函数的工厂会更好。

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);