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

Question

我不断收到此错误消息“错误警告：React 检测到 MainMenuScreen 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。有关更多信息，请阅读 Hooks 规则： https://reactjs.org/link/rules-of-hooks"。真的很困惑，不知道为什么会出现此错误，如果有人可以解释或举个例子，我们将不胜感激。非常感谢您考虑我的请求。

Here is an image of the code.

function MainMenuScreen({ navigation, route, props }) {
    const globalContext = useContext(Context)
    const { setIsLoggedIn, appSettings, domain, userObj, setUserObj, setToken, address, setAddress } = globalContext;
    const [selecedTab, setSelectedTab] = React.useState(tabs[0]);


return (
    <View style={styles.container}>
        <LinearGradient colors={['gold', '#FF7F50', '#FF7F50']} style={StyleSheet.absoluteFill}>
            
            <FlatList 
                data={tabs}
                horizontal
                showsHorizontalScrollIndicator={false}
                style={{ flexGrow: 0 }}
                keyExtractor={(item, index) => `${item}-${index}`}
                renderItem={({ item: tab }) => {
                return (
                    <TouchableOpacity onPress={() => setSelectedTab(tab)}>
                        <View style={[styles.pill,
                        {
                            backgroundColor: selecedTab === tab ? 'gold' : 'transparent',
                        },
                    ]}>
                            <Text style={[styles.pillText, { color: selecedTab === tab ? 'white' : 'black' }]}>{tab}</Text>
                        </View>
                    </TouchableOpacity>
                )
                }}
            />
            <FlatList
                data={popularFood}
                keyExtractor={item => item.key}
                renderItem={({ item }) => {
                    return (
                        <View style={{ flexDirection: 'row' }}>
                            <Image source={{ uri: item.image }} style={{ width: 100, height: 100, margin: 10 }} />
                            <View>
                                <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{item.type}</Text>
                                <View>
                                    <AntDesign name="star" size={20} color="gold" style={{ marginRight: 10 }} />
                                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{item.rating}</Text>
                                </View>
                            </View>
                        </View>
                    )
                }}
            />
            <Text style={styles.title}>Address</Text>
            <Text style={styles.title}>{address}</Text>
        </LinearGradient>
    </View>
    );
};


Error:
 ERROR  Warning: React has detected a change in the order of Hooks called by MainMenuScreen. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

Answer 1

它实际上是由于钩子实现的任何不良做法而发生的

1 - 仅在顶层调用挂钩 不要在循环、条件或嵌套函数中调用 Hooks。相反，始终在 React 函数的顶层使用 Hooks

NOTE: Implement your useState hooks first at top of the function

2 - 仅从 React 函数调用挂钩 不要从常规 JavaScript 函数中调用 Hooks

3 - 测试期间出现错误 如果在测试组件时出现此错误，请注意设置自定义挂钩的位置（替换为函数顶部）

最佳实践 使用 eslint 对代码进行 lint 避免出现 React Hooks 规则错误

使用 npm 或 yarn 安装包

npm install eslint-plugin-react-hooks --save-dev

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

React has detected a change in the order of Hooks?

javascript

reactjs

react-native

react-hooks

use-context