Question

我收到无效钩子调用的错误。任何人都可以请检测我做错的事情。此代码用于选择数据 n 将其添加到购物车。我想使用状态更新，但它给出了无效钩子的错误。

我是 react-native 的新手，不完全了解所有部分，请帮忙。

const CarouselCardItem = ({ item, index }) => {
    
    const [orderItems, setOrderItems] = React.useState([])

    function editOrder(action, id, price) {
        let orderList = orderItems.slice()
        let item = orderList.filter(a => a.id == id)

        if (action == "+") {
            if (item.length > 0) {
                let newQty = item[0].qty + 1
                item[0].qty = newQty
                item[0].total = item[0].qty * price
            } else {
                const newItem = {
                    id: id,
                    qty: 1,
                    price: price,
                    total: price
                }
                orderList.push(newItem)
            }

            setOrderItems(orderList)
            console.log(orderItems)
        } else {
            if (item.length > 0) {
                if (item[0]?.qty > 0) {
                    let newQty = item[0].qty - 1
                    item[0].qty = newQty
                    item[0].total = newQty * price
                }
            }

            setOrderItems(orderList)
        }
    }

    function getOrderQty(id) {
        let orderItem = orderItems.filter(a => a.id == id)

        if (orderItem.length > 0) {
            return orderItem[0].qty
        }

        return 0
    }

    function getBasketItemCount() {
        let itemCount = orderItems.reduce((a, b) => a + (b.qty || 0), 0)

        return itemCount
    }

    function sumOrder() {
        let total = parseFloat(orderItems.reduce((a, b) => a + (b.total || 0), 0))

        return total.toFixed(2)
    }

    const finalSumOrder = (sumOrder) => {  
        navigation.navigate("OrderDeliveryScreen", {
          sumOrder,
        })  
    } 

    return (
        <View style={styles.container} key={index}>
            <Image
                source={{ uri: item.imgUrl }}
                style={styles.image}
            />
            
        <Text style={styles.header}>{item.title}</Text>
        <Text style={styles.body}>{item.description}</Text>
        </View>
    )
}

Answer 1

<块引用>

只从 React 函数调用 Hooks 不要从常规调用 Hooks JavaScript 函数。相反，您可以：

✅ 从 React 函数组件调用 Hook。 ✅ 从自定义调用 Hooks Hooks（我们将在下一页了解它们）。通过遵循这个规则，您确保组件中的所有有状态逻辑都清楚从其源代码可见。 https://reactjs.org/docs/hooks-rules.html

尝试使用箭头函数代替 editOrder 的函数表达式

const  editOrder = (action, id, price) => {...}

错误：无效的挂钩调用。钩子只能在 react-native 中的函数组件的主体内部调用

1 个答案: