当我打开模态时，api调用总是在运行

Question

我希望如果我点击一个链接，并且模式是打开的，那么api调用会运行一次。不幸的是，它一直在运行，直到打开状态为真。

const [open, setOpen] = useState(false);
const [content, setContent] = useState();
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

const fetchData = async (movieName) => {
console.log("Fetching");
const { data } = await axios.get(
`https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&utf8=1&formatversion=latest&srsearch="${movieName}" articletopic:films`
);
setContent(data);
console.log(data);
};
if (open) {
fetchData();
}

Answer 1

当组件被挂载时，应该使用useEffect钩子只调用API一次。

更换下方

if (open) {
fetchData();
}

带有

import { useEffect } from "react";
...
...
useEffect(() => {
fetchData();
}, []);

Answer 2

当open为true时，直接调用fetchData。当api调用成功时，它为setContent。从而触发组件重新渲染。它再次调用api并设置状态重新呈现等。在useEffect内部调用api。

useEffect(() => {
if (open) {
fetchData();
}
}, [open]);