FlatList, Props ListHeaderComponent and Dynamic flatlist dat

Question

对不起，我没有灵感，我不知道我的问题应该用什么标题。
我在React原生应用程序上使用Socket.io来渲染一些动态数据。
我使用FlatList来显示所有这些数据，我需要在FlatList的顶部显示一些内容，如过滤器和按钮。
所以在我的FlatList道具中，我使用ListHeaderComponent，并在此组件中显示另一个平面列表和内容。
我的问题是:

当主FlatList与Socket.io响应之一(每5秒)更新时，ListHeaderComponent显示的所有组件都不可用一段时间。
这段时间是500ms或更少，但是在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的组件移动到FlatList上面，就没有问题了。
但是如果我这样做，只有FlatList是可滚动的，我希望整个页面都是可滚动的。
我不能用ScrollView包装我的Flatlist，因为这个错误:VirtualizedLists不应该嵌套在具有相同方向的普通scrollview

有人遇到过这个问题吗?

感谢

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没有更改。