React Hooks - компонент не обновляется при сортировке объекта

Question

Итак, я пытаюсь отсортировать мои data в алфавитном порядке по местоположению. То, что у меня есть ниже, похоже, работает, и мой консольный журнал выводит правильный порядок - Однако мой компонент, похоже, не рендерится. Я не уверен, что это просто не повторный рендеринг, или useEffect запускает и снова делает дефолтную сортировку? Довольно плохо знаком с этим, так что я не совсем уверен!

Я попробовал следующее с некоторыми простыми изменениями текста и обновлением приложения, как и ожидалось.

Не уверен, где яя иду не так?

Любая помощь будет отличной. Спасибо!

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('/api/somestuff');
            setData(result.data.default.sort((a,b) => a.brand.localeCompare(b.brand)));
        };
        fetchData();
    }, []);

    const sortLocation = () => {
        setData(data.sort((a,b) => a.location.localeCompare(b.location)));
        console.log(data)
    }

    return (
        <>
            <button onClick={() => sortLocation()}>Sort by location</button>

            {data && data.map((item, index) => (
                <span key={index}>
                    <p>{item.brand}</p>
                    <p>{item.location}</p>
                </span>
            ))}
        </>
    );

}

export default App;

Answer 1

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

const sortLocation = () => {
    const dataArray = [ ...data]
    setData(dataArray.sort((a,b) => a.location.localeCompare(b.location)));
    console.log(data)
}

Надеюсь, это поможет