React Native：无效的钩子调用

Question

我正在努力适应 React Native。目前我有这些嵌套的 FlatLists（其中第一级显示 RenderedOrders 的列表，而这些 RenderedOrders 本身在其中有一个 FlatList）。

这是主屏幕：

const ActiveScreen = () => {
    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);
    const [isLoadingApi, setLoadingApi] = useState(true);
    const [orderData, setOrderData] = useState([])

    /* Fetch currently taken orders */
    useEffect(() => {
        getTakenOrders()
            .then((data) => setData(data))
            .catch((error) => console.error(error))
            .finally(() => setLoading(false));
    }, []);

    /* Fetch order info from API */
    useEffect(() => {
        fetch('https://alessandro-visualizr.herokuapp.com/api/orders/NEFACTURAT')
            .then((response) => response.json())
            .then((json) => setOrderData(json))
            .catch((error) => console.error(error))
            .finally(() => setLoadingApi(false));
    }, []);

    return (
        <View style={{ flex: 1, padding: 24 }}>
            {isLoading || isLoadingApi ? <ActivityIndicator/> : (
                <FlatList
                    data={data}
                    keyExtractor={({ id }, index) => id}
                    renderItem={({ item }) => (RenderedOrder(item, orderData)) }
                />
            )}
        </View>
    );
}

export default ActiveScreen;

虽然这是上面提到的组件：

import React, {useEffect, useState} from "react";
import {FlatList, Text, View} from "react-native";
import {removeTakenOrder} from "../screens/OrderScreen";

function RenderedOrder(orderId, orderData) {
    const [triggered, setTriggered] = useState(true);

    return (
        <View
            style={{ flex: 1}}
        >
            <View
                style={{ fontSize: 20, borderRadius: 5, borderWidth: 1,
                    marginBottom: 10, padding: 10, backgroundColor: 'rgba(34, 139, 34, 0.75)', color: 'black',
                    flex: 1 }}
            >
                <Text
                    style={{ fontSize: 24 }}
                >
                    #{orderId}
                </Text>

                <View
                    style={{ alignItems: 'flex-end' }}
                >
                    <Text
                        style={{ fontWeight: 'bold', color: 'red', fontSize: 20 }}
                        onPress={() => removeTakenOrder(orderId)
                            .then(() => alert("Order #" + orderId + " has been removed"))
                        }
                    >
                        X
                    </Text>
                </View>

            </View>

            {true &&
                <FlatList
                    data={orderData.filter((order) => (order.orderId === orderId))[0].products}
                    keyExtractor={({ id }, index) => id}
                    listKey = {orderId}
                    renderItem={({ item }) => (
                        <View>
                            <Text
                                style={{ fontSize: 18, padding: 5 }}
                            >
                                - {item.name}
                                <Text style={{ fontWeight: 'bold' }}> x{item.quantity} </Text>
                            </Text>
                        </View>
                    )}
                />
            }
        </View>
    );
}

export default RenderedOrder;

但是，在运行此示例时，我遇到了这个问题（由于RenderedOrder 的状态声明）：

Invalid hook call. Hooks can only be called inside the body of a function component.

我知道在 React 中，状态只能在函数中使用，而不能在类组件中使用。但是，我承认这两者之间的差异对我来说不是那么清楚。我在这里犯错了吗？

Answer 1

您使用RenderedOrder 作为function 而不是functional 组件：

改变这个：

renderItem={({ item }) => (RenderedOrder(item, orderData)) }

到这里：

renderItem={({ item }) => <RenderedOrder item={item} orderData={orderData} /> }