将无限 FlatList 与搜索一起使用时遇到问题

Question

所以我正在使用 FlatList 列出一些 D&D 生物，并且我正在尝试实现一个搜索栏，用户可以在其中直接找到他们正在寻找的内容。

function LandingPage() {

    const [referencesList, setReferencesList] = useState([])
    const [search, setSearch] = useState('')
    const [page, setPage] = useState(1)
    
    const renderItem = ({ item }) => (
        <ReferenceItem name={`${item.name} CR: ${item.challenge_rating}`} key={item.slug} index={item.slug}/>
    )

    useEffect(() => {
        api.get('/', {
            params: {
                fields: ['slug', 'name', 'challenge_rating'].join(),
                limit: 100,
                ordering: 'slug',
                search,
                page
            }
        }).then( response => {
            setReferencesList([...referencesList, ...response.data.results])
        }).catch( error => 
            console.log(error) 
        )
    }, [search, page])

    return (
        <View style={styles.container}>
            <PageHeader title="Monsters List">
                <SearchReferences search={setSearch}/>
            </PageHeader>
                <FlatList
                    data={referencesList}
                    renderItem={renderItem}
                    keyExtractor={item => item.slug}
                    onEndReachedThreshold={40}
                    onEndReached={() => setPage(page + 1)}
                />
        </View>
    )
}

export default LandingPage

问题是，每次我尝试搜索某些内容时，它实际上都会将结果添加到我已有的列表中。我试过这样解决这个问题：

.then( response => {
        let referencesResults = search === '' ? response.data.results : [...referencesList, ...response.data.results]
        setReferencesList(referencesResults)
})

但现在当我搜索某些内容然后清除我的搜索时，它不会返回到我列表的初始状态。有人可以帮我吗？或者至少给我指明方向。

Answer 1

那是因为这里

setReferencesList([...referencesList, ...response.data.results])

您正在将新结果附加到整个现有列表，但没有对其进行重复数据删除。

看起来你想要的只是

setReferencesList(response.data.results)

除非您想缓存以前返回的结果，这需要一些额外的逻辑。

将无限 FlatList 与搜索一起使用时遇到问题

Having trouble using infinite FlatList together with a search

mobile

android

reactjs

react-native

react-native-flatlist