我嘗試使用 axios 和 react-query 中的 useQuery 從我自己的 API 獲取和顯示資料。由于我在我的 API 中使用分頁，我還實作了表格，可以選擇顯示當前頁面資料的頁面。在我嘗試轉到下一頁之前，一切都很好。當我這樣做時，保存資料的表組件不會更新。當我將回應列印到控制臺時，所有資料都會更新，但表格組件不會更新。例如，當我轉到瀏覽器中的另一個選項卡然后回傳時，表格組件會更新。
我在單獨的檔案中使用這樣的 axios：
export const getUsersQueryKey = () => "users";
export const useUsersQuery = (page: number) =>
useQuery(getUsersQueryKey(), () =>
axios
.get(`http://localhost:8081/api/users?pageNumber=${page}&pageSize=2`)
.then((response) => response.data.content as User[])
);
這是我渲染資料的容器：
const UsersContainer: React.FunctionComponent = () => {
const [page, setPage] = useState(0);
const { data, isLoading } = useUsersQuery(page);
if (isLoading) return <LinearProgress />;
const ChangePage = (event: any, page: number) => {
setPage(page - 1);
};
const users = data?.map((user) => <UserItem key={user.id} user={user} />);
return (
<Table>{users}</Table>
);};
如何使用新資料更新表格組件，或者我的代碼是否缺少某些內容？
uj5u.com熱心網友回復：
您的查詢不會聽取page更改。您應該將其包含在查詢鍵中。
useQuery([getUsersQueryKey(), page], () => ...);
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/525197.html
標籤：反应打字稿axios