Javascript 在参数更改时使用useQuery重新获取

我正在尝试使用

react query

实现分页。在页面更改时，我正在使用

setArrivals

更新

useffect

中的页面。出于某种原因，我总是发送

arrivals

的前一个值作为

getProductList

函数的参数。要解决此问题，我将在

setTimeout

中发送

refetch（）

请求。它确实管用，但我觉得不对。让我知道我做错了什么

const HomePage = ({ newArrivals }) => {
  const [page, setPage] = useState(1);
  const [arrivals, setArrivals] = useState({ ...newArrivals, page: page });

  useEffect(() => {
    setArrivals((values) => {
      console.log({ page });
      return { ...values, page: page };
    });
    setTimeout(function () {
      newArrivalsQuery.refetch();
    }, 0);
  }, [page]);

  const newArrivalsQuery = useQuery(
    ['productListByNewArrivals'],
    () => getProductList(arrivals),
    {
      select: useCallback((data) => {
        return JSON.parse(data);
      }, []),
    }
  );

  return (
    <>
      <NewArrivals
        newArrivalsQuery={newArrivalsQuery}
        page={page}
        setPage={setPage}
      />
    </>
  );
};

export async function getServerSideProps(context) {
  const newArrivals = {
    sort: 'createdAt',
    order: 'desc',
  };

  try {
    const queryClient = new QueryClient();

    await queryClient.prefetchQuery('productListByNewArrivals', async () => {
      const newArrivalsResult = await listProduct(newArrivals);
      return JSON.stringify(newArrivalsResult);
    });

    return {
      props: {
        newArrivals: newArrivals,
        dehydratedState: dehydrate(queryClient),
      },
    };
  } catch (error) {
    console.log('error: ', error);
    if (error) {
      return {
        redirect: {
          destination: '/login',
          permanent: false,
        },
      };
    }
  }
}

const主页=（{newArrivals}）=>{
const[page，setPage]=useState（1）；
const[arrivals，setArrivals]=useState（{…newArrivals，page:page}）；
useffect（（）=>{
setArrivals（（值）=>{
console.log（{page}）；
返回{…值，page:page}；
});
setTimeout（函数（）{
newArrivalsQuery.refetch（）；
}, 0);
}，[第页]；
const newArrivalsQuery=useQuery(
['productListByNewArrivals']，
（）=>getProductList（到达），
{
选择：useCallback（（数据）=>{
返回JSON.parse（数据）；
}, []),
}
);
返回(
);
};
导出异步函数getServerSideProps（上下文）{
常数新到达={
排序：'createdAt'，
命令：“desc”，
};
试一试{
const queryClient=new queryClient（）；
等待queryClient.prefetchQuery（'productListByNewArrivals'，async（）=>{
const newArrivalsResult=等待列表产品（newArrivals）；
返回JSON.stringify（newArrivalsResult）；
});
返回{
道具：{
新来者：新来者，
脱水状态：脱水（queryClient），
},
};
}捕获（错误）{
console.log（'error:'，error）；
如果（错误）{
返回{
重定向：{
目标：'/login'，
永久性：假，
},
};
}
}
}

最好的方法是将查询函数的依赖项添加到queryKey中。react查询是声明性的，如果queryKey更改，它将自动重新获取。如果您必须使用

useffect

和

refetch

，这可能不是最简单的解决方案：

const HomePage = ({ newArrivals }) => {
  const [page, setPage] = useState(1);
  const [arrivals, setArrivals] = useState({ ...newArrivals, page: page });

  const newArrivalsQuery = useQuery(
    ['productListByNewArrivals', arrivals],
    () => getProductList(arrivals),
    {
      select: useCallback((data) => {
        return JSON.parse(data);
      }, []),
    }
  );

现在，

arrivals

是queryKey的一部分，这是您在

getProductList

中的queryFn中使用的。现在，您需要做的就是调用

setArrivals

，然后react查询将重新调用

旁注：看起来，

arrivals

不是真正的状态，而是派生状态。至少在这段代码中，您只调用setter，这似乎是错误的。看起来您希望与

page

保持同步，并在每次调用

setPage

时进行计算，因此您还可以执行以下操作：

  const [page, setPage] = useState(1);
  const arrivals = { ...newArrivals, page: page };