如何解决无法使用Http POST请求向下滚动到ReactNative FlatList上的数据
我想在ReactNative FlatList中渲染项目列表,最初我要加载15个项目,然后在用户向下滚动时加载更多项目。我正在使用FlatList的onEndReached
道具来滚动获取新物品。我正在使用带有POST方法的api,该方法将包含pageNumber,pageSize等的对象作为输入,并返回包含列表项的对象{ success: true,message: 'success.',data: [ items : [...] ] }
。
为此,我使用apisauce npm包并编写了一个自定义钩子(useSearch.js),该钩子处理形成api请求对象,然后调用api并获取项。
当我向下滚动到屏幕时,我遇到错误。第一次加载组件时,没有出现任何错误,但是滚动时,出现了以下错误。尝试了一段时间后,我意识到相同的代码可用于任何其他Http GET请求,但是当我使用Http POST方法时,它不起作用。如何解决这个问题呢。任何帮助表示赞赏。
Warning: Can't perform a React state update on an unmounted component. This is a no-op,but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in %s.%s,a useEffect cleanup function,in App (created by ExpoRoot)
in RCTView (at NativeAppearance.tsx:4)
in FallbackAppearanceProvider (at src/index.tsx:70)
in AppearanceProvider (created by ExpoRoot)
in RootErrorBoundary (created by ExpoRoot)
in ExpoRoot (at renderApplication.js:45)
in RCTView (at AppContainer.js:109)
in RCTView (at AppContainer.js:135)
in AppContainer (at renderApplication.js:39)
TypeError: undefined is not an object (evaluating 'item.listingId.toString')
下面是我正在使用的代码
client.js
import { create } from "apisauce";
const apiClient = create({
baseURL: 'http://localhost:9000',});
export default apiClient;
useSearch.js(自定义挂钩)
const useSearch = () => {
const searchList = { pageNumber: 1,pageSize: 15,sortField: "createddate",sortOrder: "desc",isActive: true};
const [items,setItems] = useState([]);
const [error,setError] = useState(false);
const [pageNumber,setPageNumber] = useState(1);
const [loading,setLoading] = useState(false);
const endpoint = "/listings";
const getItems = async (categoryId) => {
setLoading(true);
setPageNumber((prevPageNumber) => prevPageNumber + 1);
const response = await apiClient.post(`${endpoint}/search`,{
...searchList,pageNumber,categoryId,});
setLoading(false);
if (!response.ok) {
if (response.data && response.data.message) return setError(true);
else return setError(true);
}
if (items && items.length > 0)
setItems([...items,response.data?.data?.items]);
else setItems(response.data?.data?.items);
return response;
};
return {error,getItems,items,loading };
};
ListingsScreen.js(组件)
const ListingsScreen = ({ route }) => {
const categoryId = route.params;
const { items,loading } = useSearch();
useEffect(() => {
getItems(categoryId);
},[]);
return (
<>
<ActivityIndicator visible={loading} />
<Screen style={styles.screen}>
<FlatList
showsVerticalScrollIndicator={false}
data={items}
keyExtractor={(item) => item.listingId.toString()}
renderItem={({ item }) => (
<CustomListItem onPress={() => console.log("On Press Item")} title={item.name} subTitle={item.category} />
)}
onEndReached={() => getItems(categoryId)}
onEndReachedThreshold={0.5}
/>
</Screen>
</>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。