React. Некорректно обрабатывается select

Question

Проблема в изменении селекта e.target.value срабатывает корректно, а в selectedSort данные не закидываются сразу.

Если указать изначальное значение стейта, то работает, но при этом значения не соответствуют выводу

App.js

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [selectedSort, setSelectedSort] = useState('');

  // ЕСЛИ ИЗНАЧАЛЬНО УКАЗАТЬ, ТО ХОТЬ КАК-ТО РАБОТАЕТ
  // const [selectedSort, setSelectedSort] = useState('city');

  const [data, setData] = useState([
    { id: 1, name: 'Jessica', city: 'LA' },
    { id: 2, name: 'Jacob', city: 'Miami' },
    { id: 3, name: 'Lory', city: 'Moscow' },
    { id: 4, name: 'Lindsey', city: 'London' },
    { id: 5, name: 'Stefani', city: 'France' }
  ]);

  const options = [
    { value: 'name', name: 'По имени' },
    { value: 'city', name: 'По городу' }
  ];

  // Делаем сортировку
  const sortFields = e => {
    setSelectedSort(e.target.value);

    // появляется значение при перевыборе селекта
    console.log('selectedSort: ', selectedSort);

    // срабатывает корректно
    console.log('e.target.value: ', e.target.value);
    setData(
      [...data].sort((a, b) => a[selectedSort].localeCompare(b[selectedSort]))
    );
  };

  return (
    <div>
      {/* Выводим селект */}
      <select value={selectedSort} onChange={sortFields}>
        {options.map(({ value, name }) => (
          <option key={value} value={value}>
            {name}
          </option>
        ))}
      </select>

      <div>
        <div
          style={{
            display: 'flex',
            justifyContent: 'flex-start',
            fontWeight: 700
          }}
        >
          <div style={{ display: 'flex', flex: '0 1 50%' }}>Имя</div>
          <div>Возвраст</div>
        </div>
        {data.map(option => (
          <p
            key={option.name}
            style={{ display: 'flex', justifyContent: 'space-around' }}
          >
            <div>{option.name}</div>
            <div>{option.city}</div>
          </p>
        ))}
      </div>
    </div>
  );
}

Answer 1

Добавь useEffect который будет делать сортировку при изменении стэйта

  const sortFields = e => {
    setSelectedSort(e.target.value);
  };
  useEffect(()=>{
     setData(
       [...data].sort((a, b) => a[selectedSort].localeCompare(b[selectedSort]))
     );
  },[selectedSort])

БЛОГ НА HUSL

React. Некорректно обрабатывается select

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