每分钟刷新从API接收的数据React，Javascript

Question

我正在做一个小项目，该项目涉及获取不同位置的天气，然后动态获取这些位置的时间。所有这些都很好，但后来我尝试更进一步，尝试每分钟刷新一次从API获得的数据(无需重新提交/按回车键(。我已经尝试过在代码中实现setinterval函数的各种方法，但似乎都不起作用。以下是代码的样子：

function App() {
const [query, setQuery] = useState("");
const [weather, setWeather] = useState({});
const [timeZone, setTimeZone] = useState({});
const handleChange = (e) => {
setQuery(e.target.value);
};
const apiCall = () => {
Axios({
method: "get",
url: `${api.timeBase}apiKey=${api.timeKey}&location=${query}`,
timeout: 10000, 
})
.then((res) => {
console.log(res.data);
setWeather(res.data);
//setQuery("");
})
.catch((err) => {
console.log(err);
});
};
const handleSubmit = (e) => {
e.preventDefault();
apiCall();
};
useEffect(() => {
setInterval(apiCall, 60000);
}, []);
useEffect(() => {
if (weather.main !== undefined) {
Axios.get(
`${api.timeBase}apiKey=${api.timeKey}&location=${weather.name}, ${weather.sys.country}`
)
.then((res) => {
console.log(res.data);
setTimeZone(res.data);
})
.catch((err) => {
console.log(err);
});
}
}, [weather]);

基本上，我得到最多的问题是，在setinterval函数中的某个位置，query参数被清除，API继续检索不同的位置，直到恢复正常。我试图阻止query参数在更新状态后清除，但没有帮助。

PS：我不得不分解handlesubmit，因为将setinterval附加到原始代码块会引发错误原因e.preventDefault没有定义。此外，我认为在没有useEffect的情况下调用setInterval也会使情况变得更糟。

Answer 1

间隔结束后清除间隔。setInterval函数返回一个应该清除的timerId，否则它将保留在计时器池中，即使在回调实例运行后也可以执行。

React.useEffect(() => {
const id = setInterval(apiCall, 60000);
return () => clearInterval(id);
}, []);