需要将router.query变量传递给API URL调用，但在第一次呈现时未定义

Question

我有以下API调用：

const router = useRouter();
const { albumQuery } = router.query;
const [albums, setAlbums] = useState([]);
const fetchAlbumsHandler = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
const url = `http://ws.audioscrobbler.com/2.0/?method=album.search&album=${albumQuery}&api_key=MY_API_KEY&format=json`;
const res = await fetch(url);
const data = await res.json();
if (!res.ok) {
throw new Error("Something went wrong!");
}
const jsonAlbums = data.map(
// JSON business Logic
);
setAlbums(transformedAlbums);
} catch (error) {
setError(error.message);
}
setIsLoading(false);
}, []);

具有相应的useEffect功能：

useEffect(() => {
fetchAlbumsHandler();
}, [fetchAlbumsHandler]);

然而，由于NextJS实现的详细信息，API调用在第一次呈现时将${albumQuery}视为未定义。有没有一种方法可以让我在第一次渲染时访问变量？

Answer 1

否，如果albumQuery在初始渲染中不可用，那么代码应该处理等待它变为可用。

现有代码假设albumQuery在初始渲染中可用，并尝试在useCallback钩子中关闭它。此后调用useEffect钩子，并且由于fetchAlbumsHandler现在是稳定的引用，useEffect钩子将不会被重新触发，fetchAlbumsHandler也不会被重新存储，因为useCallback钩子具有空的依赖数组。

CCD_ 10似乎是CCD_ 11钩子和/或CCD_ 12钩子的依赖项。如果fetchAlbumsHandler没有作为道具传递给孩子，那么将其存储起来就没有什么实际好处。我建议将其移动到useEffect钩子回调中，并使用albumQuery作为依赖项。

示例：

const router = useRouter();
const { albumQuery } = router.query;
const [albums, setAlbums] = useState([]);
useEffect(() => {
const fetchAlbumsHandler = async () => {
setIsLoading(true);
setError(null);
try {
const url = `http://ws.audioscrobbler.com/2.0/?method=album.search&album=${albumQuery}&api_key=MY_API_KEY&format=json`;
const res = await fetch(url);
const data = await res.json();
if (!res.ok) {
throw new Error("Something went wrong!");
}
const jsonAlbums = data.map(
// JSON business Logic
);
setAlbums(transformedAlbums);
} catch (error) {
setError(error.message);
}
setIsLoading(false);
}
fetchAlbumsHandler();
}, [albumQuery]);