Сортировка react-элементов при первом рендеринге страницы

Question

Сортировка react-элементов при первом рендеринге страницы

Рейтинг: 0Ответов: 1Опубликовано: 23.01.2023

Пишу интернет магазин. Там есть возможность отсортировать товары при необходимости. Товары - массив обьектов. Но при первом рендеринге компонента товары не фильтруются. Пробовал задать сортировку через useEffect(() => {setState(...)}, []), но это не вызывает ререндеринг страницы. Массив обьектов находится в стейте products. Прикрепляю код.

const stock = [
  {img: './img/pizza/1.png', title: 'Пицца-туница', price: 395, popularity: 3, filters: ['Мясные']},
  {img: './img/pizza/2.png', title: 'Груша-Блю Чиз', price: 450, popularity: 4, filters: ['Вегетарианские']},
  {img: './img/pizza/3.png', title: 'Чикен бургер', price: 290, popularity: 5, filters: ['Мясные', 'Гриль']},
  {img: './img/pizza/4.png', title: 'Кордон Блю', price: 385, popularity: 10, filters: ['Мясные']},
  {img: './img/pizza/5.png', title: 'Пепперони Ранч', price: 420, popularity: 1, filters: ['Мясные', 'Гриль', 'Острые']},
  {img: './img/pizza/6.png', title: 'Чикен Ранч', price: 370, popularity: 6, filters: ['Мясные', 'Гриль', 'Острые']},
  {img: './img/pizza/7.png', title: 'Чикен Терияки', price: 500, popularity: 7, filters: ['Мясные', 'Острые']},
  {img: './img/pizza/8.png', title: 'Жюльен', price: 325, popularity: 9, filters: ['Вегетарианские']},
  {img: './img/pizza/9.png', title: '4 сезона', price: 500, popularity: 2, filters: ['Мясные', 'Гриль', 'Острые']},
  {img: './img/pizza/10.png', title: 'Сырная с ветчиной', price: 325, popularity: 8, filters: ['Мясные']},
]

function App() {
  const [filter, setFilter] = useState(filters[0])
  const [sort, setSort] = useState('популярности')

  const [products, setProducts] = useState(stock)

  useEffect(() => {setProducts( prev => prev.sort((a, b) => a.popularity - b.popularity) )}, [])

  return (
    <div className="wrapper">
      <Header />
      <Filter 
        filter={filter} 
        setFilter={setFilter} 
        filters={filters} 
        
        sort={sort}
        setSort={setSort}

        products={products}
        setProducts={setProducts}
      />
      <div className="items">
        <h1>
          Все пиццы
          {filter !== 'Все' && <span>: {filter}</span>}
        </h1>
        <div className="products">
          {products
            .map(item => (
              filter === 'Все'
                ? <Product key={item.title} img={item.img} title={item.title} price={item.price} />
                : item.filters.includes(filter) && <Product key={item.title} img={item.img} title={item.title} price={item.price} />
              ))
          }
        </div>
      </div>
    </div>
  );
}

reactjs

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

React - это библиотека javaScript, поэтому при работе с объектами, надо быть аккуратными.

Для того, что бы реакт понял, что данные были изменены, необходимо вернуть новый массив. Метод sort возвращался тот же массив, но с упорядоченными элементами.

Для того, что бы исправить это, достаточно воспользоваться оператором spread

useEffect(() => {
  setProducts( prev => [ ...prev.sort((a, b) => a.popularity - b.popularity)] );
}, []);

Проверить и убедиться можно на примере:

const arrOne = [1,2, 8, 4, 9];
const arrTwo = arrOne.sort();
const arrthree = [ ...arrOne.sort() ];
console.log(arrOne === arrTwo);
console.log(arrOne === arrthree);

Сортировка react-элементов при первом рендеринге страницы

Ответы