FlatList、Props ListHeaderComponent 和動態 flatlist 數據

Question

抱歉標題，我沒有受到啟發，而且我不知道該給我的問題取什么標題。
我在我的 React 本機應用程序上使用Socket.io來渲染一些動態數據。
我正在使用FlatList來顯示所有這些數據，並且我需要在FlatList的頂部顯示一些內容，例如過濾器和按鈕。
所以在我的FlatList Props 中，我使用ListHeaderComponent ，在這個組件中我顯示了另一個平面列表和內容。
我的問題是：

當使用Socket.io響應之一（每 5 秒）更新主FlatList時， ListHeaderComponent顯示的所有組件在一段時間內都無法使用。
這段時間大概是 500 毫秒或更短，但是在ListHeaderComponent中我有一些按鈕/過濾器，在這段時間內它們是不可點擊的。
並且每次更新 FlatList 數據時都會重復該問題。
你可以在這里看到我的代碼（簡化）：

export default function MyList({ navigation }) {
    const [myData, setMyData] = useState<ResponseType[]>([])

    // Socket Io
    const socket = io(SOCKET_URL, { forceNew: true, timeout: 5000 })

    useEffect(() => {
        socket.on("connect", () => {
            console.log("Connected to Socket ID : ", socket.id)
        })

        return () => {
            socket.disconnect()
            socket.close()
        }
    },[])

    socket.on("socketResponse", (data: ResponseType) => {
        setMyData(prevDate => [...prevDate, data])
    })

    const renderFilterItem = ({ item }: { item: Filter }) => <Text key={ item.id }>{ item.title }</Text>
    const renderListItem = ({ item }: { item: ResponseType }) => <Text key={ item.id }>{ item.id }</Text>

    const ListTop = () => (
        <>
            <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
                <Text>BACK CONTENT</Text>
            </TouchableOpacity>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={someFilters}
                keyExtractor={(item) => item.id}
                renderItem={renderFilterItem}
            />
        </>
    )

    return (
        <FlatList
            ListHeaderComponent={ListTop}
            data={myData}
            keyExtractor={(item) => item.id}
            renderItem={renderListItem}
            maxToRenderPerBatch={5}
            windowSize={2}
        />
    )
}

我不知道如何更好地解釋我的問題。 但是如果我把 ListHeaderComponent 的組件ListHeaderComponent上面，就沒有問題了。
但如果我這樣做，只有 FlatList 是可滾動的，我希望所有頁面都是可滾動的。
由於此錯誤，我無法用ScrollView包裝我的 Flatlist： VirtualizedLists 永遠不應嵌套在具有相同方向的普通 ScrollViews 中

有沒有人遇到過這個問題？

謝謝

Answer 1

嘗試對 ListTop 組件使用優化，因為這里可能出現的問題是由於父組件的更改而呈現您的功能組件。

這是代碼示例。

import React, {useCallback} from 'react';

// your other codes
const ListTop = useCallback(() => (
        <>
            <TouchableOpacity onPress={() => navigation.navigate('HomePage')}>
                <Text>BACK CONTENT</Text>
            </TouchableOpacity>
            <FlatList
                horizontal
                showsHorizontalScrollIndicator={false}
                data={someFilters}
                keyExtractor={(item) => item.id}
                renderItem={renderFilterItem}
            />
        </>
    ), [someFilters]);

這里組件將被記憶，直到 someFilters 沒有變化。