錯誤：無效的掛鈎調用 api FlatList react-native

Question

我的 react-native 項目出現錯誤，我使用 typescript 和 expo。 因此，當我使用 useEffect() 獲取 api 對 FlatList 的響應時，我收到此錯誤：在此處輸入圖像描述

我的代碼：

import React, { useEffect, useState } from 'react';
import {
  Image,
  Text,
  View,
  SafeAreaView,
  FlatList
} from "react-native";
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import styles from './styles';

function Products() {
    
    const [apiProduct, setProduct] = useState([]);

    useEffect(() => {
        fetch('https://laravel-api.com/v1/product',{
                method: 'GET',
                headers: {
                    'Accept'        : 'application/json'
                },
        })
        .then(response =>response.json())
        .then(data => {
                setProduct(data.data)
            })
    }, []);

    return (
        <View style={styles.container}>
            
            <Text style={styles.title1}>
                {"Produtos mais Buscados"} {"\n"}
            </Text>

            <SafeAreaView>
                    <FlatList 
                        data={apiProduct}
                        keyExtractor={(apiProduct) => apiProduct }
                        contentContainerStyle={{ flexGrow: 1 }}
                        renderItem={viewProduct}
                    ></FlatList>
            </SafeAreaView>

        </View>
    );
}

function viewProduct(item) {
    
    const navigation = useNavigation();
    const { id, name, price, category_name, img_url } = item.item
    const imgUrl = "https://s3.url.com/" + img_url;

    return (
        <View style={styles.prodList}>
            <Image source={{ uri: imgUrl }} style={styles.prodImage} /> 
            <TouchableOpacity 
                style={styles.prodName}
                onPress={() => {
                    navigation.navigate('productView', {
                      itemId: id,
                    });
                  }}>
                <Text>{name} {"\n"} </Text>
                <Text style={styles.prodCategory}>{category_name.toUpperCase() } {"\n"}</Text>
                <Text style={styles.prodPrice}>{"R$ " + price }</Text>
            </TouchableOpacity>
        </View>
    )
}

export default Products;

但是，如果我刪除導航方法navigation.navigate('productView', {itemId: id}); ，這個錯誤消失了。

Answer 1

您正在為平面列表上的renderItem調用 function。 這意味着您的viewProduct只是 function 而不是組件。 正如錯誤所說，如果你想使用鈎子，你需要一個組件。 您可以通過使 function 成為組件然后將其作為一個組件添加到renderItem來解決此問題。

<FlatList
    data={apiProduct}
    keyExtractor={(apiProduct) => apiProduct}
    contentContainerStyle={{ flexGrow: 1 }}
    renderItem={({ item }) => <ViewProduct {...item} />}
/>

確保將ViewProduct因為它現在將成為一個組件。

另一種選擇是在您的Products組件上調用useNavigation並將 function 傳遞給您的viewProduct function 並將其用於您的onPress 。