在 React 中将函数传递给 State [英] Passing a function to State in React

问题描述

我是 React 的新手，有一个关于在状态中传递函数的问题.我的 util 文件夹中有几个排序功能"，如下所示:

I am new to React and have a question regarding passing down functions in a state. I have a couple of 'sorting functions' in my util folder, which look like this:

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

和其他一些:sortHighestSummerTemp, sortLargestIncreaseHotDays, sortColdestSummerCountries, sortMostColdDays, sortWorstAffectedCountries 看起来非常相似.我使用它们根据用户的请求对我的数据进行排序，如果我将 sortHighestSummerTemp(filteredCountries) 包裹在我的数据周围，它会起到很好的作用.

and a few others: sortHighestSummerTemp, sortLargestIncreaseHotDays, sortColdestSummerCountries, sortMostColdDays, sortWorstAffectedCountries which pretty much look similar. I use them to sort my data by users' request, and if I wrap sortHighestSummerTemp(filteredCountries) around my data, it works as a charm.

现在的问题:因为我最终将有 10 个以上的过滤器，所以创建一个全局的 const [queryFilter, setQueryFilter] = useState({ sortHighestSummerTemp}); 然后响应const onChangeQueryFilter = (e) =>{ setQueryFilter(e.target.value);};

Now the issue: because I will have eventually 10+ filters, it makes sense to me to create a global const [queryFilter, setQueryFilter] = useState({ sortHighestSummerTemp}); which then responds to const onChangeQueryFilter = (e) => { setQueryFilter(e.target.value); };

然而，在尝试 queryFilter (filteredCountries) 时，终端会在我过滤时显示 queryFilter is not a function"?它仍然是相同的 sortHighestSummerTemp 函数，或者我在这里遗漏了什么?我是否正确地总结了这个问题?

Yet, upon trying queryFilter (filteredCountries) the terminal shows me "queryFilter is not a function" when I filter it? It's still the same sortHighestSummerTemp function right or what am I missing here? Do I summarize this problem correctly?

希望它很清楚并且你明白我想要做什么.任何人都可以向我解释发生了什么以及这里的最佳做法是什么?

Hopefully it was clear and you understand what I am trying to do. Could anyone explain me what is going on and what's the best practice here?

更新:Prateek 提出以下建议:

UPDATE: Prateek suggested the following:

function sortBy(filteredCountries, sortKey) { return [...filteredCountries].sort((a, b) => a[sortKey] - b[sortKey]);} const [queryFilter, setQueryFilter] = useState({ sortMostHotDays, });constfilteredData = sortBy(filteredCountries, sortMostHotDays);控制台日志(过滤数据)；

这不起作用，它仍然显示旧数据(filteredCountries)但过滤不起作用.有人有线索吗?

This does not work, it still shows the old data (filteredCountries) but the filtering does not work. Does someone have a clue?

推荐答案

第一种方法

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

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

这篇关于在 React 中将函数传递给 State的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！