React 检测到调用的 Hooks 顺序发生了变化

Question

我刚开始学习 React Native，我正在尝试创建一个使用 NativeBase ActionSheet 组件的登录屏幕，但我一直收到一个错误 React has detected a change in the order of Hooks called

我认为这是因为 fontsLoaded 布尔值被异步加载，但我不确定。处理异步方法并确保正确加载屏幕的正确方法是什么？

这是我的代码：

function LoginScreen() {
let [fontsLoaded] = useFonts({
    HammersmithOne_400Regular,
})

if (!fontsLoaded) {
    return <AppLoading />;
}

const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();

return (
    <View style={styles.container}>
        <Text style={styles.logo}>Logo</Text>

        <View style={styles.signInContainer}>
            <Button onPress={onOpen} title="Log in">
                Log in
            </Button>
            <Actionsheet isOpen={isOpen} onClose={onClose}>
                <Actionsheet.Content>
                    <Box w="100%" h={60} px={4} justifyContent="center">
                        <Text>
                            Albums
                        </Text>
                    </Box>
                </Actionsheet.Content>
            </Actionsheet>
        </View>
    </View>
);

}

Answer 1

你违反了 hook-rule，因为你在 if (!fontsLoaded) { return 之后有条件地调用 useDisclose }

必须在组件的顶层调用挂钩。

在这里你可以找到更多关于反应文档中所有钩子规则的信息： https://reactjs.org/docs/hooks-rules.html

为了解决您的问题，您必须在 if 语句之前调用 useDisclose。

Answer 2

将 useDisclose 挂钩移至顶部，将 if 语句移至下方。这是原因why

   let [fontsLoaded] = useFonts({
    HammersmithOne_400Regular,
})

const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();

if (!fontsLoaded) {
    return <AppLoading />;
}

React 检测到调用的 Hooks 顺序发生了变化

React has detected a change in the order of Hooks called

asynchronous

reactjs

react-native

react-hooks