我正在做一个小项目，涉及获取不同地点的天气，以及随后动态获取这些地点的时间。所有这些都运行良好，但后来我尝试更进一步，尝试每分钟刷新从 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 也会使情况变得更糟。