React 檢測到 Hooks 的順序發生了變化？

Question

我不斷收到此錯誤消息：“錯誤警告：React 檢測到 MainMenuScreen 調用的 Hooks 順序發生了變化。如果不修復，這將導致錯誤和錯誤。有關更多信息，請閱讀 Hooks 規則： https://reactjs .org/link/rules-of-hooks” 。 真的很困惑，不知道為什么會出現這個錯誤，如果有人可以請解釋或展示一個例子，將不勝感激。 非常感謝您考慮我的要求。

這是代碼的圖像。

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 - 僅在頂層調用 Hook 不要在循環、條件或嵌套函數中調用 Hook。 相反，請始終在 React 函數的頂層使用 Hooks

注意：首先在函數頂部實現你的 useState 鈎子

2 - 僅從 React 函數調用 Hooks 不要從常規 JavaScript 函數調用 Hooks

3 - 測試期間出現錯誤如果在測試組件時遇到此錯誤，請注意設置自定義掛鈎的位置（替換到函數頂部）

最佳實踐使用 eslint 對代碼進行 lint，避免出現 React Hooks Rules 錯誤

使用 npm 或 yarn 安裝包

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