Question

我试图了解在useSelector和_bootstrapAsync中使用失败之间的区别

    import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'

import { ActivityIndicator, StatusBar, View, Text } from "react-native";

export default function authLoading({ navigation }) {

  const _bootstrapAsync = () => {
    const authData = useSelector(state=>state.Auth);

    console.log('authData',authData)
  };


  useEffect(() => {
    _bootstrapAsync()

  },[]);


  return (
    <View>
      <ActivityIndicator />
      <StatusBar barStyle="default" />
      <Text>Auth Loading</Text>
    </View>
  );
}

它引发错误

只能在功能组件的内部调用钩子

但是当我可以在外面使用Selector时，它工作正常。

import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'

import { ActivityIndicator, StatusBar, View, Text } from "react-native";

export default function authLoading({ navigation }) {
  const authData = useSelector(state=>state.Auth);

  const _bootstrapAsync = () => {
    console.log('authData',authData)
  };


  useEffect(() => {
    _bootstrapAsync()

  },[]);


  return (
    <View>
      <ActivityIndicator />
      <StatusBar barStyle="default" />
      <Text>Auth Loading</Text>
    </View>
  );
}

那是为什么？

Answer 1

Hook仅用于功能组件，以减少复杂类组件的复杂性。现在，您可以将复杂的类组件拆分为小的功能组件，并使用Hooks将生命周期作为类组件进行跟踪。

您只能在功能组件或主体内使用挂钩，如错误所示。而且，您还可以自定义Hook来创建钩子。

Here you can see how to use hook within useEffect()

useSelector进入函数引发错误钩子只能在函数组件的主体内部调用

1 个答案: