如何將搜索功能應用於具有可變子成員的 SectionList？

Question

在這里，我提供了一個小列表來展示我獲得的數據類型，有些列表很大，包含多個部分和多個子對象。 我在 SectionList 頂部有一個搜索框，列表必須僅根據搜索查詢顯示數據。 列表必須實時排序。 我嘗試了一些解決方案，但主要問題似乎是過濾邏輯。 歡迎任何幫助。 提前致謝。

sectionData = 
[
    {
        "GroupName": "Otopulse", 
        "data": [
                    {
                        "CurrentSpeed": 0.01,
                        "LastUpdatedDate": "20 Jun, 2021",
                        "LastUpdatedTime": "08:29 AM",
                        "VehicleId": 1210,
                        "VehicleName": "AhmedGMC", 
                        "VehicleStatus": "PARKED", 
                        "VehicleType": "Car"
                    }
                ]
    }, 
    
    {
        "GroupName": "Unassigned", 
        "data": 
                [
                    {
                        "CurrentSpeed": 1,
                        "LastUpdatedDate": "19 Jun, 2021", 
                        "LastUpdatedTime": "03:35 PM",
                        "VehicleId": 1715, 
                        "VehicleName": "Khalil", 
                        "VehicleStatus": "OFFLINE", 
                        "VehicleType": "Car"
                    }, 
                    {
                        "CurrentSpeed": 1, 
                        "LastUpdatedDate": "29 Dec, 2020", 
                        "LastUpdatedTime": "09:57 AM",
                        "VehicleId": 1697, 
                        "VehicleName": "Nazir test", 
                        "VehicleStatus": "OFFLINE", 
                        "VehicleType": "Car"
                    }
                ]
    }       
]

Answer 1

這個答案適用於希望在 React Native 中的 SectionList 上實現搜索/過濾功能的任何人。 我使用了一個庫：React Native Searchable List，見這里。 這是一個相當容易實現的庫。 查看我的實現：請從上面的問題聲明中記下我的部分數據

const [data, setData] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [searchAttribute, setSearchAttribute] = useState('VehicleName');
const [ignoreCase, setIgnoreCase] = useState(true);

<TextInput
    style={styles.searchInputBox}
    placeholder="Search"
    onChangeText={setSearchTerm}
    value={searchTerm}
/>

<SearchableSectionList
    ItemSeparatorComponent={FlatListItemSeparator}
    sections={data}
    searchTerm={searchTerm}
    searchAttribute={searchAttribute}
    searchByTitle={false}
    ignoreCase={ignoreCase}
    keyExtractor={(item, index) => item + index}
    renderItem={({item}) => <VehiclesListItem item={item} />}
    renderSectionHeader={({section: {GroupName}}) => (
      <View
        style={{
          backgroundColor: '#dadada',
          padding: 10,
        }}>
        <Text style={{color: '#2A2A2A', fontSize: 15}}>{GroupName}</Text>
      </View>
    )}
  />

謝謝，保重。 快樂編碼！！