Thắc mắc về filter với flatlist trong react-native

[giadat99 (Trương Gia Đạt)]

Cách em làm là như đoạn code dưới, chỉ có một state là dataSource .Đầu tiên là copy dataSource vào một biến mới. Sau đó em gõ vào TextInput (text.length > 0) thì nó sẽ search ra cái item đó nhưng khi em xóa ô TextInput (text.length < 0) thì nó lại giữ nguyên cái kết quả tìm kiếm trước đó và không thể search được nữa. Cái logic của em là copy dataSource ra mảng mới sau đó kiểm tra nếu text.length > 0 thì sẽ filter xong rồi setDataSource(data) , nếu text.length < 0 thì sẽ không filter và setDataSource(data)

const search = (text) => {
    setSearchTerm(text);
    let data = [...dataSource];
    if (text.length > 0) {
        console.log('searhTerm has value');
        data = data.filter(item => {
            return item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
        })
         setDataSource(data);
    } else {
        console.log('searchTerm does not have value');
        setDataSource(data);
    }
}

Đây là cách giải quyết em tìm hiểu trên google, em sẽ tạo ra hai state là dataSource và dataBackup. Khi text.length > 0 thì sẽ tạo ra một biến data , lấy dataBackup từ state filter xong gán vào biến data xong rồi setDataSource(data). Ngược lại thì em setDataSource(dataBackup). Cách này thì giải quyết được vấn đề nhưng em thắc mắc tại sao phải tạo thêm một state . Cả hai state dataSource và dataBackup đều được gán chung một nguồn dữ liệu.

const search = (text) => {
     setSearchTerm(text);
    if (text.length > 0) {          
        const data = dataBackup.filter(item => {
            return item.name.toLowerCase().indexOf(text.toLowerCase()) !== -1;
        });
        setDataSource(data);
    } else {         
        setDataSource(dataBackup);
    }
}

Em cảm ơn mọi người

[drgnz]

Cách bạn làm là thay đổi mảng gốc rồi. Mà thay đổi mất mảng gốc mất rồi thì data đâu nữa mà filter đúng chưa nè.

Nó na ná như code sau

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr)
arr = arr.filter(e => e <= 5)
console.log(arr) // khi này arr = [1, 2, 3, 4, 5]
arr = arr.filter(e => e % 2)
console.log(arr) // [2, 4]

Thế nên chỉ cần copy lại 1 mảng phụ, filter trên đó là được

arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arrBk = [...arr]
console.log(arr) // [1..10]
arr = arrBk.filter(e => e <= 5)
console.log(arr) // [1, 2, 3, 4, 5], arrBk vẫn bằng [1..10]
arr = arrBk.filter(e => e % 2)
console.log(arr) // [2, 4, 6, 8], ra đúng kết quả vì arrBk ko bị thay đổi

[giadat99 (Trương Gia Đạt)]

mình có let data = […dataSource] . Không biết đúng không nhỉ?

[giadat99 (Trương Gia Đạt)]

à mình hiểu rồi , cảm ơn bạn nhiều