我正在使用react native hook;我的应用是带有餐厅订单的列表,当我将订单分配给经销商时,我的列表和状态不会改变,即使我确实要刷新
但是我希望在数据更新后立即手动完成
请帮帮我 在useEffect中刷新是一种好习惯吗?
const OrdersList = () => {
const [
{
selectedSubsidiary: {id: subsidiaryid = ''},
},
] = useContext(GlobalContext);
const [orders, setOrders] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [flatListRef, setRef] = useState();
const statusInfo = [
{
id: pending,
icon: 'clock',
route: ORDER_DETAIL,
},
{
id: cooking,
icon: 'cooking',
route: PREPARING_ORDER,
},
{
id: pickUp,
icon: 'subsidiary-delivery',
route: ORDER_DETAIL,
},
{
id: waitingForDealer,
icon: 'pending-driver',
route: ORDER_DETAIL,
},
];
const setLoading = loading => {
setRefreshing(loading);
};
const getOrders = async () => {
try {
setLoading(true);
const _orders = await getOrdersBySubsidiaryApi(subsidiaryid);
setOrders(_orders);
} catch ({message}) {
// eslint-disable-next-line no-alert
alert(message);
} finally {
setLoading(false);
}
};
useEffect(() => {
getOrders();
}, []);
const scrollTo = index => {
flatListRef.scrollToIndex({animated: true, index: index});
};
return (
<SafeAreaView style={styles.safeArea}>
<View>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
{orders.map((data, index) => {
if (
data.id === cancel ||
data.id === delivered ||
data.id === inTransit ||
data.id === assigned
) {
return null;
}
return (
<StatusRow
key={index}
data={data}
statusInfo={statusInfo}
index={index}
scrollTo={scrollTo}
refreshing={true}
/>
);
})}
</ScrollView>
</View>
<FlatList
data={orders}
ref={ref => setRef(ref)}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={getOrders} />
}
renderItem={({item, index}) => {
if (
item.id === cancel ||
item.id === delivered ||
item.id === inTransit ||
item.id === assigned
) {
return null;
}
return (
<View key={index}>
<StatusContainer
name={item.name}
statusInfo={statusInfo}
array={item.order}
statusIndex={index}
refreshing={true}
/>
</View>
);
}}
/>
<CustomModal />
</SafeAreaView>
);
};