Next.js router.query 的不一致行为

Question

我正在使用

nextjs

构建一个图像搜索网站。其中有路线

/search/photos/[slug]

，基于从

unsplash api

获取的 slug 图像。

const router = useRouter();
const {slug} = router.query;

useEffect(() => {
   if(router.isReady && slug) {
      fetchPhotos();
   }
}, [slug])



 const fetchPhotos = () => {
      unsplash.search
        .getPhotos({
          query: slug,
          page: 1
          perPage,
        })
        .then((result) => {
          console.log(result);
          if (result.status === 200 && result.type === "success") {
            dispatch({ type: "SET_PHOTOS", payload: result.response.result });
          } else {
            console.log(result.errors);
          }
        })
        .catch((info) => {
          console.log(info);
        });
  };

当 slug 发生变化时，

fetchPhotos

函数有时会获取 slug 先前值的数据。如何避免

router.query.slug

这种不一致的行为，并得到当前路由动态路由

slug

值？