проблемы рендеринга при использовании useEffect

Question

Хочу сделать сортировку массива по алфавиту А-Я и Я-А, для этого при нажатии на кнопку фильтра меняю state с условиями сортировки. После запускается useEffect где и происходит сортировка массива, но рендер уже отсортированного массива делается только при нажатии на кнопку другого варианта сортировки. К примеру: нажимаю на сортировку по А-Я ничего не происходит, нажимаю на следующую сортировку по Я-А, и рендерит массив, который был отсортирован по А-Я. Почему так и как это можно исправить?

useEffect(() => {
    if (filterName === 'AZ') {
        
        const newDataArray = locationData.sort(function (a, b) {
            return a.name.localeCompare(b.name);
        });
        setLocationData(newDataArray)
    } else if (filterName === 'ZA') {
        const newDataArray = locationData.sort(function (a, b) {
            return b.name.localeCompare(a.name);
        });
        setLocationData(newDataArray)
    } else if (filterName === 'all') {
        serviceLocation(startCount)
            .then(data => {
                setLocationData(data)
            })
    }
}, [filterName])

Answer 1

В данном случае можно обойтись без useEffect например так:

import React, { useState } from "react";

const unsortedArray = [
  { id: "2", name: "b" },
  { id: "1", name: "a" },
  { id: "4", name: "d" },
  { id: "5", name: "e" },
  { id: "6", name: "f" },
  { id: "3", name: "c" },
];

const App = () => {
  const [sortAZ, setSortAZ] = useState(true);

  return (
    <div>
      <h3>sortAZ: {sortAZ.toString()}</h3>
      {unsortedArray
        .map((item) => ({ ...item }))
        .sort((a, b) =>
          sortAZ ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name)
        )
        .map(({ id, name }) => (
          <div key={id}>Name: {name}</div>
        ))}
      <button onClick={() => setSortAZ((sort) => !sort)}>
        Toggle sort order
      </button>
    </div>
  );
};

export default App;

БЛОГ НА HUSL

проблемы рендеринга при использовании useEffect

Ответы (1 шт):