错误：无效的钩子调用 api FlatList react-native答案

【问题标题】：Error: Invalid hook call api FlatList react-native错误：无效的钩子调用 api FlatList react-native
【发布时间】：2021-03-30 06:26:59
【问题描述】：

我的 react-native 项目有一个错误，我使用 typescript 和 expo。因此，当我使用 useEffect() 获取对 FlatList 的 api 响应时，我收到此错误：enter image description here

我的代码：

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});，这个错误就会消失。

【问题讨论】：

标签： android react-native react-native-flatlist use-effect

【解决方案1】：

您正在为您的平面列表中的renderItem 调用一个函数。这意味着您的 viewProduct 只是一个函数，而不是一个组件。正如错误所说，如果你想使用钩子，你需要一个组件。您可以通过将函数设为组件然后将其添加到 renderItem 来解决此问题。

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

确保您将ViewProduct 大写，因为它现在将成为一个组件。

另一种选择是在您的Products 组件上调用useNavigation，并将一个函数传递给您的viewProduct 函数并将其用于您的onPress。

【讨论】：