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

【问题标题】：React/Ionic: Data from database shows undefined when trying to make Axios requestReact/Ionic：尝试发出 Axios 请求时，来自数据库的数据显示未定义
【发布时间】：2021-06-27 22:09:49
【问题描述】：

我目前面临一个问题，即我从 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
    })
}

【问题讨论】：

标签： javascript reactjs firebase ionic-framework google-cloud-firestore

【解决方案1】：

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

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);
})

【讨论】：