错误：“状态”不是函数，反应状态/javascript答案

【问题标题】：Error: "state" is not a function, React state / javascript错误：“状态”不是函数，反应状态/javascript
【发布时间】：2021-05-03 05:34:42
【问题描述】：

让我尽可能清楚地解释问题。我有几个排序函数，我想在一个名为 queryFilter 的状态中设置它们，以便用户可以选择排序方法并根据他们的请求进行更改。它工作正常，直到我用它创建一个状态，我不知道为什么。

那么让我告诉你什么是有效的：

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

const sortHighestWinterTemp = (filteredCountries) => {
    return filteredCountries.sort(
      (a, b) => b.avwintertemp20802099 - a.avwintertemp20802099
    );
  };

const sortMostHotDays = (filteredCountries) => {
    return filteredCountries.sort(
      (a, b) => b.avdaysabove95F20802099 - a.avdaysabove95F20802099
    );
  };

const [queryFilter, setQueryFilter] = useState('');    ⬅️ 

const [filteredCountries, setFilteredCountries] = useState(
    sortMostHotDays(initialState.filter(matchesSearch).filter(matchesContinent)) ⬅️ 
  );

这行得通，我的数据在 sortMostHotDays 上排序。然而，现在当我用它创建一个状态以便它可以改变时，它就不再起作用了：

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

const sortHighestWinterTemp = (filteredCountries) => {
    return filteredCountries.sort(
      (a, b) => b.avwintertemp20802099 - a.avwintertemp20802099
    );
  };

const sortMostHotDays = (filteredCountries) => {
    return filteredCountries.sort(
      (a, b) => b.avdaysabove95F20802099 - a.avdaysabove95F20802099
    );
  };

const [queryFilter, setQueryFilter] = useState({ sortMostHotDays }); ⬅️ 

const [filteredCountries, setFilteredCountries] = useState(
    queryFilter(initialState.filter(matchesSearch).filter(matchesContinent)) ⬅️ 
  );

它给了我错误：“TypeError：queryFilter 不是函数”。我在这里做错了什么？我该如何解决它以使其正常工作？

感谢您的回答！

更新：

我尝试创建一个排序函数，它对键进行排序。但这不会改变我的数据。


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

  const [queryFilter, setQueryFilter] = useState(
    filteredCountries.avwintertemp20802099
  );

  const filteredData = sortBy(filteredCountries, queryFilter);
  }

这不会改变任何东西，但不会产生任何错误。

【问题讨论】：

好吧，您将queryFilter 设置为对象，而不是函数；尝试用const [queryFilter, setQueryFilter] = useState(sortMostHotDays);替换const [queryFilter, setQueryFilter] = useState({ sortMostHotDays });
你为什么要把一个 const 函数放到一个状态开始
@secan 我试过这个，但是：“TypeError: Cannot read property 'sort' of undefined”。
@KrzysztofKrzeszewski 我是 React 新手，所以如果您有任何建设性的建议，我将不胜感激。
@BridlerShoc 这意味着initialState.filter(matchesSearch).filter(matchesContinent)（您传递给函数的参数）是undefined 那么initialState、matchesSearch 和matchesContinent 是什么？它们来自哪里？

标签： javascript reactjs sorting state setstate

【解决方案1】：

问题出在这一行：

const [queryFilter, setQueryFilter] = useState({ sortMostHotDays });

您已添加{ sortMostHotDays } 作为您的初始状态。那确实不是一个函数，那是一个对象。翻译成这样：

{
  sortMostHotDays: [Function]
}

如果你要这样声明：它应该可以工作。

const [queryFilter, setQueryFilter] = useState(sortMostHotDays);

【讨论】：

您好，感谢您的回答！我试过这个，但是：“TypeError: Cannot read property 'sort' of undefined”。