React-хуки useState / setState не работают после сортировки массива и его передачи - PullRequest
Новая
       4

React-хуки useState / setState не работают после сортировки массива и его передачи

0 голосов
/ 08 января 2020

У меня есть приложение React, и я использую перехватчики React: 

  const [companies, setCompanies] = useState([]);

Я загружаю данные, и «компании» заполняются данными. У меня также есть другая кнопка для сортировки данных по NetIncome: 

 const sortByIncome = e => {
    const el = document.getElementById("sort-selectbox");
    const arr = companies.sort((a, b) => (a.NetIncome > b.NetIncome ? -1 : 1));
    console.log(arr);
    setCompanies(arr);
  };

Проблема в том, что setCompanies не выполняет повторную визуализацию. В console.log я вижу, что массив отсортирован правильно, и даже если я console.log (компании), я вижу, что он также отсортирован. Но замечание происходит в интерфейсе. Также, если я наберу тот же код: 

const sortByIncome = e => {
    const el = document.getElementById("sort-selectbox");
    const arr = companies.sort((a, b) => (a.NetIncome > b.NetIncome ? -1 : 1));
    console.log(arr);
    setCompanies([]);
  };

, но передам пустой массив setCompanies, он сразу же работает и ничего не отображает (у меня есть функция рендера, которая получает компании в качестве параметра). Так почему же это не работает с передачей обр? Это потому, что я передаю тот же массив, но только что отсортированный?

Ответы [ 2 ]

0 голосов
/ 08 января 2020

Значение переменной-хука companies внутри функции sortByIncome всегда будет начальным значением вашего хука ([]) и никогда не получит новое значение, установленное с помощью setCompanies.

Решение вашей проблемы состоит в том, чтобы обернуть вашу функцию sortByIncome в useCallback хук с переменной хук companies в качестве зависимости. Это гарантирует, что функция всегда использует текущее значение companies. 

const sortByIncome = React.useCallback(e => {

   // Using `companies` will always result in the current value

}, [companies]);

useCallback документация

0 голосов
/ 08 января 2020

Здесь: 

    const arr = companies.sort((a, b) => //...

Array.prototype.sort сортирует массив на месте , то есть мутирует исходный объект. Ссылка не меняется, и мутация не замечается. Делай вместо 

    const arr = [...companies].sort((a, b) => //...
...