Question

我在React native中有钩子调用问题。我检查了dom的版本并做出了本机反应，它看起来不错。我认为问题出在我的代码中，但是我没有任何错误。

这是我的功能：

function ReadingComponent () {

    
    const redirectTo = (screenName: any) => {
        useNavigation().navigate(`${screenName}`);
    }

这是单位列表：

       const categories = [ 
        {
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player",
        },
        {
            name : "Category 2",
            img : require("../Assets/Slika.jpg"),
            screenName : "Player1",
        },

这是onPress的平面列表详细信息：

return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableOpacity 
                            onPress={() => redirectTo(item.screenName)}>
                        <Surface style={styles.surface}>
                            <ImageBackground
                            source={item.img} 
                            style={styles.img}
                            blurRadius={0.5}>
                        <Icon name="music" color="#fff" size={22}/>
                        <Text style={styles.name}>{item.name}</Text>
                            </ImageBackground>
                        </Surface>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>
            
        );    
    }
export default ReadingComponent;

Answer 1

您否认React的挂钩规则： https://reactjs.org/docs/hooks-rules.html

useNavigation()是一个钩子，不能有条件地调用（例如在函数中）

相反，您可以编写如下代码：

 const navigation = useNavigation();
 const redirectTo = (screenName: any) => {
     navigation.navigate(`${screenName}`);
 }

我建议您仔细阅读“挂钩规则”链接，甚至为了更深入地了解，您还可以搜索如何实现React挂钩。然后，您将真正知道为什么React挂钩中的顺序如此重要。

React Native中的无效钩子调用问题

1 个答案: