Как отсортировать компоненты React по заданному значению c?

Question

У меня есть компонент React. Эти компоненты принимают «единицы» - (массив объектов) проп. Исходя из этого, я рендеринг компонента для каждого элемента. Я хочу отсортировать свои компоненты по значению «цена», которое является одним из свойств элементов состояния. Но когда я запускаю сортировку - состояние меняется правильно, но порядок компонентов не меняется.

const SearchBoxes = ({units}) => {
    const [unitsState, setUnitsState] = useState([])

    useEffect(() => {
        setUnitsState(units)
    }, [units])

    const sortByPrice = () => {
        const sortedUnits = sort(unitsState).desc(u => u.price); // sorting is correct
        setUnitsState(sortedUnits) // state is changing correctly
    }

    return (
        <div>
            {unitsState.map((u,i) => {
                return <UnitBox key={u.price} unit={u} />
            })}
        </div>
    )
}

Может кто-нибудь помочь мне, пожалуйста? Почему порядок компонентов не меняется при изменении состояния после запуска сортировки?

Answer 1

Вы нигде не вызываете sortByPrice - все, что вы сделали, это определили функцию. Я не пробовал, но что если вы измените useEffect на:

useEffect(() => {
  setUnitsState(sort(unitsState).desc(u => u.price));
}, [units])

Тогда вам не понадобится метод сортировки.