Ошибка: "состояние" не является функцией, реагирует на состояние / javascript

#javascript #reactjs #sorting #state #setstate

#javascript #reactjs #сортировка #состояние #setstate

Вопрос:

Позвольте мне объяснить проблему как можно более ясно. У меня есть несколько функций сортировки, которые я хочу установить в состояние, называемое 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)) ⬅️ 
  );

Это выдает мне ошибку: «Ошибка типа: 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);
  }

Это ничего не меняет, но и не выдает никаких ошибок.

1. Ну, вы задаете queryFilter как объект, а не как функцию; попробуйте заменить const [queryFilter, setQueryFilter] = useState({ sortMostHotDays }); на const [queryFilter, setQueryFilter] = useState(sortMostHotDays);

2. почему вы для начала переводите функцию const в состояние

3. @secan Я пробовал это, но: «Ошибка типа: не удается прочитать свойство ‘sort’ неопределенного».

4. @KrzysztofKrzeszewski Я новичок в React, поэтому, если у вас есть какие-либо конструктивные предложения, я был бы очень признателен.

5. @BridlerShoc это означает initialState.filter(matchesSearch).filter(matchesContinent) (аргумент, который вы передаете функции) undefined , так что это initialState matchesSearch такое, matchesContinent и откуда они берутся?

Ответ №1:

Проблема в этой строке:

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

Вы добавили { sortMostHotDays } в качестве исходного состояния. Это действительно не функция, это объект. Это означает следующее:

 {
  sortMostHotDays: [Function]
}

Если бы вы объявили это так: это должно сработать.

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