React原生:undefined不是对象(计算"useContext. getItemsCount")

fcipmucu  于 2023-02-13  发布在  React
关注(0)|答案(3)|浏览(115)

我是React Native的初学者,在调用getItemsCount时遇到此错误。

*请单击链接查看图像

https://i.stack.imgur.com/wbwjZ.png
这是CartIcon.js的代码:

import React, {useContext} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {CartContext} from './CartContext';
export function CartIcon({navigation}){
    const {getItemsCount} = useContext(CartContext);
    return(
        <View style = {styles.container}>
            <Text style = {styles.text}
                onPress = {() => { 
                navigation.navigate('Cart');
                }}
            >Cart ({getItemsCount()}) </Text>
        </View>
        );
}
const styles = StyleSheet.create({
    container: {
        marginHorizontal: 10,
        backgroundColor: '#515b8c',
        height: 40,
        padding: 15,
        borderRadius: 38/2,
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        color: '#ccc',
        fontWeight: 'normal',
    },
});

https://i.stack.imgur.com/ABYHm.png
这是CartContext.js的代码:

import React, {createContext, useState} from 'react';
import {getProduct} from './productService.js';
export const CartContext = createContext();
export function CartProvider(props){
    const [items, setItems] = useState([]);

    function addItemToCart(id){
        const product = getProduct(id);
        setItems((prevItems) => {
            const item = prevItems.find((item) => (item.id == id));
            if(!item){
                return [...prevItems, {
                    id,
                    qty: 1,
                    product,
                    totalPrice: product.price
                }];
            }
            else{
                return prevItems.map((item) => {
                    if(item.id == id){
                        item.qty++;
                        item.totalPrice += product.price;
                    }
                    return item;
                });
            }
        });
    }
    function getItemsCount(){
        return items.reduce((sum,item) => (sum+item.qty),0);
    }
    function getTotalPrice(){
        return items.reduce((sum,item) => (sum+item.totalPrice),0);
    }

    return(
        <CartContext.Provider
        value = {{items,setItems,getItemsCount,addItemToCart,getTotalPrice}}>
        {props.children} 
        </CartContext.Provider>
    );
}

https://i.stack.imgur.com/HsXoY.png

lp0sw83n

lp0sw83n1#

猜测一下,但我认为您的组件在提供程序之外,请检查您的CartIcon是否确实在CartContext.Provider之内,否则它将无法访问它。

9w11ddsr

9w11ddsr2#

请将此添加到CartContext.js:

const useCartContext = () => {   
 const context = useContext(CartContext);
 if (context === undefined) { 
  throw new Error('useCartContext must be used within a CartContextProvider');
 }
 return context;
};

以及
export { CartProvider, useCartContext };
转到App.jsx并将整个应用程序打包为

<CartProvider>
// your app
</CartProvider>

然后在CartIcon.js中导入useCartContext并替换
const {getItemsCount} = useContext(CartContext);

const { getItemsCount } = useCartContext();
让我知道发生了什么。这个想法是创建一个钩子,这是更好的,但这里的问题是,您的组件需要在一个提供者内部,它才能访问上下文。

olhwl3o2

olhwl3o23#

MySide出错的原因是创建全局上下文时忘记使用return语句。请检查Side。**-〉1 more Side可能未使用ContextProvider或 Package 在App.jsx文件App.js文件中(大多数人忘记)。

相关问题