Vấn đề lặp lại các mục trong component AutoComplete của Ant Design khi kéo xuống nhiều lần

Ngày cập nhật: 12-12-2024 | Lượt xem: 760 | Số từ: 299 | Phân loại: ReactJS

Khi mới bắt đầu làm quen với component AutoComplete trong thư viện Ant Design, mình phát hiện một lỗi khá phiền toái. Đó là khi danh sách các lựa chọn có chứa dữ liệu trùng lặp, thì mỗi lần bạn kéo thanh cuộn dropdown lên xuống vài lần, các mục sẽ bị lặp lại liên tục. Điều này gây ảnh hưởng nghiêm trọng đến trải nghiệm người dùng và khiến giao diện trở nên lộn xộn.

Để khắc phục tình trạng này, cách đơn giản nhất là đảm bảo rằng danh sách các tùy chọn được trả về từ backend không chứa các mục trùng lặp.

Mình đã kiểm tra logic xử lý phía server viết bằng Go (Golang), và nhận ra rằng nguyên nhân nằm ở việc chưa loại bỏ khoảng trắng thừa trước và sau tên người, dẫn đến việc các mục bị coi là khác nhau dù thực tế chỉ là tên giống nhau nhưng có khoảng trắng thừa.

Tuy nhiên, điều thú vị hơn cả là mình đã khám phá ra một hàm tiện lợi trong phiên bản mới của Golang – cụ thể là hàm slices.Compact() — giúp loại bỏ các phần tử trùng lặp một cách nhanh chóng.

Hàm loại bỏ phần tử trùng lặp trong slice (Golang)

Từ phiên bản Go 1.21, chúng ta có thể sử dụng hàm slices.Compact() để lọc những mục trùng lặp. Mình đang sử dụng phiên bản Go 1.23, vì vậy rất thuận tiện:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

package main

import (
    "fmt"
    "slices"
)

func main() {
    list := []string{"c", "a", "b", "c", "b", "b"}
    slices.Sort(list)
    fmt.Println(slices.Compact(list)) // Kết quả: [a b c]
}

Tài liệu

Không cần sắp xếp vẫn có thể dùng được không?

Câu trả lời là không, nếu bạn không gọi slices.Sort() trước, thì slices.Compact() sẽ không thể loại bỏ toàn bộ các mục trùng lặp. Vì hàm này chỉ hoạt động hiệu quả khi các mục trùng lặp xếp liền kề nhau trong mảng.

Ví dụ dưới đây minh họa điều đó:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

package main

import (
    "fmt"
    "slices"
)

func main() {
    list := []string{"c", "a", "b", "c", "b", "b"}
    // slices.Sort(list) - Bỏ qua bước này
    fmt.Println(slices.Compact(list)) // Kết quả: [c a b c b]
}

Lưu ý: Trong trường hợp các mục trùng lặp không liên tiếp, slices.Compact() sẽ không thể loại bỏ hết các phần tử dư thừa.