列表下拉会多次触发 onRefresh #988
Description
请按以下格式提供问题的相关信息。
问题的具体描述
需要做一个列表下拉刷新功能，但是目前下拉一次会触发多次onRefresh，重复刷新。可能是onRefresh引用问题，但是没找到合适的解决办法
相关代码
export const ReceiveTaskListScreen = () => {
const [refreshing, setRefreshing] = React.useState(false);
const [data, setData] = React.useState<OrderList[]>([]);
// 获取任务列表函数 - 用于初始加载和刷新
const fetchTaskList = useCallback(async () => {
try {
console.log("🚀 ~ ReceiveTaskListScreen ~ start 111111111111111");
const res = await getReceiveTaskList({
pageNumber: 1,
pageSize: 10,
});
console.log("🚀 ~ ReceiveTaskListScreen ~ res:", res);
if ((res as any)?.code === '0') {
const newTasks = (res as any)?.data?.content || [];
setData(newTasks);
console.log("🚀 ~ ReceiveTaskListScreen ~ end 222222222222222");
}
} finally {
setRefreshing(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // 空依赖，使用 ref 访问状态
// 初始化加载数据
React.useEffect(() => {
fetchTaskList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onRefresh = React.useCallback(() => {
console.log("🚀 ~ ReceiveTaskListScreen ~ onRefresh:111111111111111");
setRefreshing(true);
fetchTaskList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const renderItem = ({ item }: { item: OrderList }) => {
const progress = item.qtyNeed > 0
? Math.round((item.qtyReceived / item.qtyNeed) * 100)
: 0;
return (
<TouchableOpacity
style={[styles.card, item.active && styles.activeCard]}
activeOpacity={0.7}
>
<View style={styles.cardHeader}>
<Text style={styles.orderNo}>{item.orderNo}</Text>
{item.active && (
<View style={styles.activeBadge}>
<Text style={styles.activeText}>进行中</Text>
</View>
)}
</View>
<Text style={styles.lpnCode}>LPN: {item.lpnCode}</Text>
{item.customerOrderNo && (
<Text style={styles.customerOrderNo}>
客户订单: {item.customerOrderNo}
</Text>
)}
<View style={styles.progressContainer}>
<View style={styles.progressInfo}>
<Text style={styles.progressText}>
已收货: {item.qtyReceived} / {item.qtyNeed}
</Text>
<Text style={styles.progressPercent}>{progress}%</Text>
</View>
<View style={styles.progressBar}>
<View
style={[styles.progressFill, { width: `${progress}%` }]}
/>
</View>
</View>
<Text style={styles.skuTypes}>
已收货SKU类型: {item.receivedSkuTypes}
</Text>
</TouchableOpacity>
);
};
return (
<SafeAreaView style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.orderId}
contentContainerStyle={styles.listContent}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
/>
</SafeAreaView>
);
}
请描述完整的环境/版本信息
System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1
Memory: 129.03 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.16.1
path: /Users/daibinbin/.nvm/versions/node/v18.16.1/bin/node
Yarn:
version: 4.10.3
path: /Users/daibinbin/.nvm/versions/node/v18.16.1/bin/yarn
npm:
version: 9.5.1
path: /Users/daibinbin/.nvm/versions/node/v18.16.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK: Not Found
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: /undefined
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.17
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.0.0
wanted: 20.0.0
react:
installed: 19.2.0
wanted: 19.2.0
react-native:
installed: 0.83.0
wanted: 0.83.0
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: Not found
newArchEnabled: false
预期结果
一次下拉一次刷新