当我使用 useNavigation 时，反应“无效的 Hook Call”错误

Question

错误消息照片

我在 React 中创建了一个产品卡，在产品卡中，我希望用户能够按下它并导航到另一个产品详细信息屏幕。现在，每次我初始化 useNavigation 时，它都会抛出“无效的挂钩调用”。

import { TouchableOpacity, Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';

const ProductCard = ({ item }) => {
    const navigation = useNavigation(); //This Line Throws the Error
    return (
        <TouchableOpacity onPress={() => {
            navigation.navigate('Product_Details', { item });
        }}
            style={styles.container}>
            <Image
                source={{ uri: item.image }}
                style={styles.coverImage}
                onError={(error) => console.log('Image load error:', error)}
            />
            <View style={styles.content}>
                <Text style={styles.brand}>{item.brand}</Text>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.price}>${item.price}</Text>
            </View>
        </TouchableOpacity>
    );
};



export default ProductCard;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 10,
        margin: 5,
        borderWidth: 1,
        borderColor: "#e8e8e8",
    },
    coverImage: {
        height: 256,
        width: "100%",
    },
    brand: {
        fontSize: 16,
        color: "#444444",
        fontWeight: "700",
    },
    price: {
        fontSize: 18,
        color: "#9C9C9C",
        fontWeight: "600",
    },
    content: {
        padding: 15,
    },
    title: {
        fontSize: 14,
        color: "#444444",
        fontWeight: "450"
    }
});

我已将其输入到我的函数中，我什至尝试在我的 ProductCard 内部以及在我的 ProductCard 外部创建一个单独的函数并返回调用，但我每次都会遇到相同的错误。任何帮助将不胜感激！

编辑

我在我的主页调用ProductCard，见下面的代码\

const HomeScreen = () => {
  const [products, setProducts] = useState(data.products);
  const [selectedCategory, setSelectedCategory] = useState(null);

  return (
    // Creating a propertly to show which category is selected
    <ScrollView
      contentContainerStyle={styles.container}>
      {/* Product List */}
      <FlatList
        ListHeaderComponent={
          <>
            {/* Adding the categories bar to home page */}
            <FlatList
              style={styles.catStyle}
              data={categories}
              renderItem={({ item }) => (
                <Category
                  item={item}
                  selectedCategory={selectedCategory}
                  setSelectedCategory={setSelectedCategory}
                />
              )}
              keyExtractor={(item) => item}
              horizontal={true}
              showsHorizontalScrollIndicator={false}
            />
          </>
        }

        data={products}
        renderItem={ProductCard}
        numColumns={2}
        contentContainerStyle={{
          paddingBottom: 25,
        }}
      />
    </ScrollView>
  );
};

enter code here

Answer 1

看起来

renderItem

属性消耗了一个返回 JSX 的函数。

Flatlist::renderItem

renderItem({
  item: ItemT,
  index: number,
  separators: {
    highlight: () => void;
    unhighlight: () => void;
    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
  }
}): JSX.Element;

现在，虽然你的

ProductCard

组件 是 从技术上讲是一个函数，它使用与

renderItem

函数签名匹配的对象参数并返回 JSX，但关于什么是 React 函数以及 React hooks 的位置和方式有一些特殊的规则叫做。 React 组件作为 JSX 传递给 React，React 处理调用该函数。

renderItem

属性正在直接调用您的

ProductCard

函数。

将代码更新为返回

ProductCard

JSX 的函数。这与您对

Category

组件所做的类似。

renderItem={(props) => <ProductCard {...props} />}

或

renderItem={({ item }) => <ProductCard item={item} />}