Reactjs 如何从函数组件到类组件访问可重用的NetInfo代码

我已经创建了一个自定义函数组件，它具有来自NetInfo的用于internet连接的eventlistener，它返回bool值和方法名。我想在每个类组件中调用该方法来检查internet连接，并使用bool值来检查连接状态

下面是我的代码

//function Component
import React, { PureComponent, useEffect, useState } from 'react';
import  NetInfo  from "@react-native-community/netinfo";


export default () => {
const [isInternetReachable, setIsInternetReachable] = useState(false)
const InternetChecker = () => {
    useEffect(() => {
        // Subscribe
        const unsubscribe = NetInfo.addEventListener((state) => {
            setIsInternetReachable(state.isInternetReachable);
            console.log("Connection type", state.type);
            console.log("Is internet Reachable?", isInternetReachable);
        });
        return () => {
            unsubscribe();
        };
    },[])
}

return [InternetChecker, isInternetReachable];

};

试图访问InternetChecker（）方法的类组件

类主屏幕扩展React.Component{
render（）{
const{navigate}=this.props.navigation；
const[InternetChecker，isInternetReachable]=internetholder（）；
//如果（！ISINTERNETREACABLE）{
//      
// }
InternetChecker（）
如果（isInternetReachable）{
console.log（“可以访问互联网”）；
}否则{
console.log（“无互联网连接”）；
}
返回(
)
};

当我尝试以上述方式访问时，我得到了无效的钩子调用，钩子只能从函数组件的主体内部调用。我们如何从类组件调用它

---

感谢您的帮助。

为函数添加名称

import React, { PureComponent, useEffect, useState } from 'react';
import  NetInfo  from "@react-native-community/netinfo";


export default ConnectivityChecker = () => {
const [isInternetReachable, setIsInternetReachable] = useState(false)
const InternetChecker = () => {
    useEffect(() => {
        // Subscribe
        const unsubscribe = NetInfo.addEventListener((state) => {
            setIsInternetReachable(state.isInternetReachable);
            console.log("Connection type", state.type);
            console.log("Is internet Reachable?", isInternetReachable);
        });
        return () => {
            unsubscribe();
        };
    },[])
}

return [InternetChecker, isInternetReachable];

};

要在何处使用此功能 您应该导入它，首先您应该阅读，第一条规则是不要在基于类的组件中调用react钩子，因此只需将主屏幕组件更新为FC组件，然后重试即可

您的自定义挂钩应如下所示：

 export const useInternetStatus = () => {// I make a name to your hook is best in inspection and testing
const [isInternetReachable, setIsInternetReachable] = useState(false)
const InternetChecker = () => {
    useEffect(() => {
        // Subscribe
        const unsubscribe = NetInfo.addEventListener((state) => {
            setIsInternetReachable(state.isInternetReachable);
            console.log("Connection type", state.type);
            console.log("Is internet Reachable?", isInternetReachable);
        });
        return () => {
            unsubscribe();
        };
    },[isInternetReachable]) // in order to re-call the hooks whenever the netInfo status changed 
}

return [InternetChecker, isInternetReachable];

};

---

您显示的函数不是功能组件，因为它不会返回可以呈现的内容。您也可以像调用钩子一样调用它。您可以做的是首先修复自定义钩子的问题：

它返回一个钩子（一个调用

useffect

的函数

InternetChecker

），这个钩子是不需要的。钩子应该只调用

useffect

本身，因此在安装时它将订阅

NetInfo

unsubscribe

函数应该，正如其名称所示，从

NetInfo

取消订阅。否则它将导致内存泄漏，因为即使您的组件已经卸载，侦听器也会被调用

然后，您可以将

主屏幕组件重新编写为一个功能组件，允许您使用其中的挂钩：

const HomeScreen = () => {
    const isInternetReachable = useInternetStatus();

    console.log(isInternetReachable);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
            </View>
        </SafeAreaView>
    );
};

const主屏幕=（）=>{
const IsInternetReach=useInternetStatus（）；
console.log（isInternetReachable）；
返回(
);
};
这不是一个功能组件。如果有什么，它是一个自定义钩子（由其他钩子组成的钩子）.Components返回jsx并用于呈现。您的函数不返回任何可以呈现的内容，您也可以像调用钩子一样调用它。您不能调用类组件中的钩子，也不能调用调用类组件中的钩子的函数。钩子的命名约定是
useXYZ
，因此应该是
use在这种情况下，InternetStatus
。如果您这样命名它，它也会被react hooks linting规则删除，以警告您不要误用它。
const useInternetStatus = () => {
    const [reachable, setReachable] = useState(false);
    
    useEffect(() => {
        const subscribe = state => setReachable(state.isInternetReachable); 

        NetInfo.addEventListener(subscribe);

        return () => NetInfo.removeEventListener(subscribe);
    },[]);

    return reachable;
};

const HomeScreen = () => {
    const isInternetReachable = useInternetStatus();

    console.log(isInternetReachable);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
            </View>
        </SafeAreaView>
    );
};