时间戳

首页 > 解决方案 > React/Ionic：尝试发出 Axios 请求时，来自数据库的数据显示未定义

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

问题描述

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

我推测是因为它在useIonViewDidEnter/componentDidMount数据库中运行并没有在函数运行之前及时检索用户的数据。我想知道是否有人对更早获取数据或从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
    })
}

标签： javascriptreactjsfirebaseionic-frameworkgoogle-cloud-firestore

解决方案

我想到了。我用 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);
})

推荐阅读