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

Question

我是新手。

我想知道为什么我不能调用另一个包含 hook 的函数（在一个文件 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 () => {} 放在 return 标签上方的 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"/>
   )
}

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

Functional Component Calling Other Function resulting Invalid Hook Call

hook

react-native

react-redux

react-hooks