Почему массив не обновляется после сортировки в React Hooks?

Question

Я новичок в React. Массив в состоянии обновляется только один раз после функции сортировки. Почему после повторного запуска функции сортировки оно не обновляется?

const [cases, setCases] = useState([1, 2, 3, 4, 5]);

let sortDown = true
let sorted = []

    function sort(){
        const copy = [...cases]
        if(sortDown){
            sorted = copy.sort(function(a, b){
                return b - a 
            })
        } else {
            sorted = copy.sort(function(a, b){
                return a - b
            })
        }
        sortDown = !sortDown
        setCases(sorted)
    }

Answer 1

Вы должны использовать переменную состояния для определения sortType.

в противном случае она будет повторно инициализироваться при каждом рендеринге.

  const [cases, setCases] = useState([1, 2, 3, 4, 5]);
  const [sortDown, setSortDown] = useState(true);

  function sort() {
    const copy = [...cases];
    if (sortDown) {
      copy.sort(function(a, b) {
        return b - a;
      });
    } else {
      copy.sort(function(a, b) {
        return a - b;
      });
    }
    setSortDown((prev) => !prev);
    setCases(copy);
  }

Answer 2

React выполняет повторную визуализацию компонента при изменении реквизита или состояния. В вашем случае вы объявляете массив sorted, а затем передаете его в setCases. Итак, впервые setCases принимает массив sorted, и это новое значение для этого. Затем вы снова сортируете значения, изменяете массив sorted и снова передаете его в setCases. Но setCases не считает sorted новым массивом, потому что он был изменен, поэтому ссылка не была изменена. Для React это все тот же массив, который вы передали в первый раз. Вам нужно вернуть новый массив и затем передать его setCases.

Другая вещь, которую вы должны сделать, это сохранить sortDown в состоянии. В противном случае он будет повторно инициализирован при каждом рендере. Следующий код должен работать в вашем случае:

    const [cases, setCases] = useState([1, 2, 3, 4, 5]);
    const [sortDown, setSortDown] = useState(true)

        function sort(){
            const copy = [...cases] // create copy of cases array (new array is created each time function is called)
            if(sortDown){
                copy.sort(function(a, b){ // mutate copy array
                    return b - a 
                })
            } else {
                copy.sort(function(a, b){
                    return a - b
                })
            }
            setSortDown(!sortDown); // set new value for sortDown
            setCases(copy); // pass array to setCases
        }