功能组件调用其他功能导致无效的挂钩调用

Question

我是新手。

我需要知道为什么我不能调用另一个包含钩子的函数（在一个文件 js 中）？

下面是我的代码：

函数 A

const callService = async () => {

const Loginreducer = useSelector((state) => state.Loginreducer)
const email = Loginreducer.form.email;
const token = Loginreducer.credential.token;
console.log(email, token);}

功能 B

const MyHomeStack = ({ navigation }) => {
    return (
        <Stack.Navigator
            screenOptions={{
                animationEnabled: false,
                title: "Some App",
                headerLeft: () => (
                    <View style={{ marginHorizontal: 10, flexDirection: "row" }}>
                        <TouchableOpacity onPress={() => navigation.replace('MyTab')}>
                            <MaterialCommunityIcons style={styles.navItem} name="fish" size={25} />
                        </TouchableOpacity>
                    </View>
                ),
                headerRight: () => (
                    <View style={{ marginHorizontal: 10, flexDirection: "row" }}>
                        <TouchableOpacity onPress={() =>
                            Alert.alert("Confirmation", "Are you sure want to logout?",
                                [
                                    {
                                        text: 'OK',
                                        onPress: () => callService()
                                    },
                                    {
                                        text: 'Cancel',
                                    },
                                ],
                            )}>
                            <MaterialCommunityIcons style={styles.navItem} name="fish-off" size={25} />
                        </TouchableOpacity>
                    </View>
                )
            }}
        >
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Food" component={FoodScreen} />
            <Stack.Screen name="MyTab" component={MyTab} />
            <Stack.Screen name="MyDrawer" component={MyDrawer} />
        </Stack.Navigator>
    )
}

功能C

const MyTab = () => {

}

...等

如果我将整个 const callService = async () => {} 放在返回标记上方的 const MyHomeStack 内，它会起作用。

但我希望它在 MyHomeStack 函数之外， 因为 callService 函数（函数 A）需要被其他函数（函数 C、D 等）访问，而不仅仅是 MyHomeStack 函数（函数 B）。

有人可以帮忙吗？

谢谢

Answer 1

React 中的钩子只能在函数组件内部或其他钩子内部使用。另见：Rules of Hooks。

这意味着你不能在callService 内部调用useSelector，因为它是一个普通函数。

有很多解决方案。一种是将state 作为参数传递给callService(state)，使其成为不使用钩子的纯函数。

另一种解决方案是将其制成自定义挂钩。您不能作为点击的结果执行挂钩，因为这也违反了挂钩的规则。但是您可以调用一个钩子来检索一个函数，然后将该函数用作您的onClick 处理程序。

const useCallService = () => {

  // all hooks must go OUTSIDE of the callback
  const Loginreducer = useSelector((state) => state.Loginreducer);

  // return a callback  
  return (event) => {
      const email = Loginreducer.form.email;
      const token = Loginreducer.credential.token;
      console.log(email, token);
  }
}

const MyComponent = () => {
   const handleClick = useCallService();
   
   return (
      <Button onPress={handleClick} text="Click"/>
   )
}