Question

我已经创建了基于钩子的可重用组件，我正在不同组件中的不同路由中使用它们，一个在/，第二个在/home。组件具有其自己的状态，并且正在useEffect()方法内对某些外部数据进行axios调用并更新其状态。当我在上述路线之间移动时，组件会重新加载，但我不会阻止这种行为。

我的意思是：第一次使用时加载一次数据，请保留该数据，当我改用另一条路线时不要重新加载。

我曾经尝试操纵axios调用和一些if语句来检查状态变化，我也曾经使用过依赖项数组[foo, bar]来检查状态变化。

    useEffect(() => {

        const getPosition = () => {
            return new Promise((resolve, reject) => {
                navigator.geolocation.getCurrentPosition(resolve, reject);
            })
        }

        if(!lat && !lon){
            getPosition()
                .then((position) => {
                    const { coords } = position
                    const { latitude, longitude } = coords
                    setLat(latitude)
                    setLon(longitude)
                })
        }

        if (lat && lon) {
            axios.get(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=bdb482c8614b9ac69c8f291d8e686e43`)
                .then(res => {
                    const { data } = res
                    const { name, main, weather } = data
                    const { temp, pressure, humidity, temp_max } = main
                    setRegion(`Region: ${name}`)
                    setHumid(`Humidity: ${humidity}%`)
                    setPress(`Preassure: ${pressure} hPa`) // hard space between template and hPa
                    setClouds(weather[0])
                    setMaxTemp(`Max Temp: ${Math.round(temp_max - 273.15)}°C`)
                    setTemp(`Temperature: ${Math.round(temp - 273.15)}°C`)
                })
                .catch(err => console.log(err))
        }
    }, [lat, lon])

我得到：

index.js：1375警告：无法在已卸载的组件上执行React状态更新。这是空操作，但表示您的应用程序中发生内存泄漏。要修复，请在> useEffect清理功能中取消所有订阅和异步任务。在Weather中（在main.js：206）在Main中（由Context.Consumer创建）

预期的行为是在组件一次加载后不重新加载。

如何防止可重用组件在不同路径之间重载其状态

0 个答案: