ordering trong react

Okay đầu tiên cách giải quyết sẽ như sau em nhé :D Em sửa lại toàn bộ đoạn em setData thành như thế này: setData([...data.sort(orderById)]) setData([...data.sort(orderByName)]) setData([...data.sort(orderByCreatedDay)]) Chạy xong em sẽ thấy kết quả được render lại đúng chuẩn trên màn hình. Và anh cũng sẽ giải thích tại sao luôn cho em cũng như bạn nào đang tham khảo câu hỏi này nhé: - Như anh đã từng chia sẻ ở một câu trả lời khác: "Cơ chế của React là Các components trong react sẽ được re-render lại mỗi khi props hoặc state thay đổi." - Trong trường hợp của em để hiểu vấn đề thì sẽ là "Phần render hiển thị ra màn hình đang không được re-render lại mặc dù kết quả sort của em đã chạy đúng khi em console.log" => Vậy có thể thu hẹp phạm vi debug lại ở đoạn em setState đang có bug. - Quay lại với phần code anh đưa ra để em fix như trên, cái thằng Sort trong JavaScript bản chất là nó sẽ thay đổi lại chính cái đối tượng - Object ban đầu mà em đưa vào, lúc này React nó vẫn đang hiểu cái giá trị state của em vẫn là cái Object ban đầu đó chứ không phải là một cái Object khác được đưa vào. Nên nó không re-render lại kết quả ra ngoài màn hình. - Vậy nên trước khi em cập nhật State, em cần phải clone kết quả sau khi em modify ra một Object mới, rồi sau đó em mới cập nhật lại vào State là được. - Phần code trên anh đưa ra cách clone bằng cú pháp Spread Operator nhé, còn nhiều cách clone khác, anh sẽ để thêm vài link tài liệu hữu ích về phần này bên dưới luôn. --- + Updating objects and arrays in state (docs chính chủ react luôn nhé, nó có ghi rõ đoạn "Replace state with a new object" luôn đó) https://react.dev/reference/react/useState#updating-objects-and-arrays-in-state + Copy Object trong JavaScript https://www.javascripttutorial.net/object/3-ways-to-copy-objects-in-javascript/

1setData([...data.sort(orderById)])
2setData([...data.sort(orderByName)])
3setData([...data.sort(orderByCreatedDay)])