React/Ionic：尝试发出 Axios 请求时，来自数据库的数据显示未定义

Question

我目前面临的问题是我从 Firebase 数据库收到的数据没有显示在我需要的 function 中。 function 我需要在useIonViewDidEnter/componentDidMount中运行的数据，因为我需要它在进入页面时开始轮询，并且每隔 30 秒进行一次轮询。

我假设因为它在useIonViewDidEnter/componentDidMount中运行，所以数据库在 function 运行之前没有及时检索用户的数据。 我想知道是否有人对更早获取数据或从其他地方的useIonViewDidEnter/componentDidMount进行天气轮询以便及时填写数据有任何其他建议？

我通过下面的代码获取数据，该代码也使用用户界面：

const [data, setData] = React.useState<User>();

useEffect(() => {
    const userRef = db.collection('users').doc(currentUserID);
    userRef.get().then((doc) => {setData(toUser(doc));})
}, [currentUserID])

但我需要访问数据来请求天气：

useIonViewDidEnter(() => {
    weatherInterval = setInterval(() => {
        getWeather()
            .then(data => setWeather(data.data))
            .catch(error => {
                setError(error)
                return setShowError(true);
            })
    }, 30000);
}, );

const getWeather = () => {
    setLoading(true);
    return axios( {
        url: `http://localhost:3000/weather`,
        method: 'get',
    }).then(res => {
        setLoading(false);
        console.log(res)
        return res;
    }).catch(error => {
        return error
    })
}

Answer 1

我想到了。 我用 useEffect() 替换了 useIonViewDidEnter() 但我也遇到了间隔加倍的问题，所以我添加了以下返回语句：

return () => clearInterval(tempInterval);

使其工作并获取数据库信息的更新代码如下：

useEffect(() => {
    const userRef = db.collection('users').doc(currentUserID);
    userRef.get().then((doc) => {
        setData(toUser(doc));
    })
}, [currentUserID])

useEffect(() => {
    tempInterval = setInterval(() => {
        sendGetRequest()
            .then(data => setItems(data.temps))
            .catch(error => {
                if (error.response.status === 403) {
                    logout();
                    return error;
                }
                setError(error)
                setShowError(true);
                return error;
            });
    }, 30000);
    return () => clearInterval(tempInterval);
})

useEffect(() => {
    weatherInterval = setInterval(() => {
        getWeather()
            .then(data => setWeather(data.data))
            .catch(error => {
                setError(error)
                return setShowError(true);
            })
    }, 30000);
    return () => clearInterval(weatherInterval);
})