Почему не отрисовывается компонент React?

Question

[Данил Волконеско]

Есть пропс с массивом обьектов такого типа:

[
{ title: "1y8xp", number: 5565546, id: 8 },
{ title: "w938j", number: 8351375, id: 7 },
{ title: "d9fhj", number: 8651745, id: 6 }
]

Через useEffect я его первоначально заношу в state:

const ListTable = ({item}: any) => {
    const [sort, setSort] = React.useState([]);
    const [sort, setSort] = React.useState([]);

    React.useEffect(() => {
        const data = item.map((item: any, index: number) => {
            item.id = index + 1;
            return item;
        });
        const concatData = data.concat();
        setSort(concatData);

    }, [item])

......
}

Суть вопроса заключается в том что при клике на определенное место, должна происходить сортировка с помощью данного кода:

.....
    const sortById = () => {
       const result =  sort.sort(( a: any, b: any) => b.id - a.id);
       setSort(result)
    }

Но проблема в том что в консоли значение меняется, а вот отрисовка не происходит с помощью кода который я возвращаю из return:

return (
....
            {
                sort.map((item: any) => (
                    <tr key={item.title}>
                        <td>{item.id}</td>
                        <td>{item.title}</td>
                        <td>{item.number}</td>
                    </tr>
                ))
            }
.....
)

Подскажите как правильно сделать, чтобы при клике происходила сортировка и вместе с ней отрисовывался заного данный компонент

Comments

[Alexandroppolus]

https://qna.habr.com/q/1181936
там много букв, но суть вопроса точно такая же.

Answer 1

[godsplan]

const sortById = () => {
       const result =  [...sort].sort( a: any, b: any) => b.id - a.id);
       setSort(result)
    }