我有一些问题
1- 我定义了一个从 API 获取数据并在useEffect
其中调用它的函数,它运行良好但是我在 VScode 中收到了这个警告。
React Hook React.useEffect 缺少一个依赖项:'getOpenOrders'。包括它或删除依赖项数组。
2- 我在 FlatList 中实现分页,所以当用户到达数据列表的末尾时,我调用一个函数来增加当前页面,并根据当前页面更新,getOpenOrders
再次获取,因为我将currentPage
useEffect传递给依赖数组
所以这里的问题是getOpenOrders
应该用新数据联系以前的数据所以我使用Concat
方法,
它运行良好但有一段时间我收到警告,告诉我有重复的数据,当我使用 spread [...old, new]
not work 并且由于 Flatlist keyExtractor 问题或其他原因而出现大错误时,
那么这里的任何英雄都可以查看我的代码并告诉我这里有什么问题吗 1 - 2
代码片段
const OpenedAppointments = () => {
const [openedAppointment, setOpenedAppointment] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [lastPage, setLastPage] = useState(1);
const [loading, setLoading] = useState(false);
const [isFetch, setIsFetch] = useState(false);
const loadMoreOrders = () => {
if (currentPage <= lastPage - 1) {
setLoading(true);
setCurrentPage((prevPage) => prevPage + 1);
console.log('loadMore??');
}
};
const _renderFooter = () => {
return loading ? (
<View
style={{
paddingVertical: 10,
}}>
<ActivityIndicator color="#000000" size="large" />
</View>
) : null;
};
const getOpenOrders = () => {
let AuthStr =
'Bearer ,,,,';
const headers = {
'Content-Type': 'application/json',
Authorization: AuthStr,
};
Api.post(
`/open_orders?page=${currentPage}`,
{},
{
headers,
},
)
.then((res) => {
let last_Page = res.data.open_orders.last_page;
let allOpenedOrders = res.data.open_orders.data;
console.log('res:', allOpenedOrders);
console.log('last_Page', last_Page);
setLastPage(last_Page);
setOpenedAppointment((prevOpenedOrders) =>
prevOpenedOrders.concat(allOpenedOrders),
); // issue 2
// setOpenedAppointment((prevOpenedOrders) =>[...prevOpenedOrders, allOpenedOrders]);
setLoading(false);
// For pull to refresh
setIsFetch(false);
})
.catch((err) => console.log('err', err));
};
// For pull to refresh
const _refresh = () => {
setIsFetch(true);
getOpenOrders();
};
React.useEffect(() => {
getOpenOrders();
}, [currentPage]); // warning here "issue 1"
return (
<FlatList
showsVerticalScrollIndicator={false}
contentContainerStyle={{flexGrow: 1}}
data={openedAppointment}
ListEmptyComponent={renderEmpty}
renderItem={renderItems}
keyExtractor={(item,index) => String(index)}
ListFooterComponent={_renderFooter}
onEndReached={loadMoreOrders}
onEndReachedThreshold={1}
// For pull to refresh
onRefresh={_refresh}
refreshing={isFetch}
/>
);
};
export default OpenedAppointments;