我是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>
);
}
3条答案
按热度按时间lp0sw83n1#
猜测一下,但我认为您的组件在提供程序之外,请检查您的CartIcon是否确实在CartContext.Provider之内,否则它将无法访问它。
9w11ddsr2#
请将此添加到CartContext.js:
以及
export { CartProvider, useCartContext };
转到App.jsx并将整个应用程序打包为
然后在CartIcon.js中导入useCartContext并替换
const {getItemsCount} = useContext(CartContext);
与
const { getItemsCount } = useCartContext();
让我知道发生了什么。这个想法是创建一个钩子,这是更好的,但这里的问题是,您的组件需要在一个提供者内部,它才能访问上下文。
olhwl3o23#
MySide出错的原因是创建全局上下文时忘记使用return语句。请检查Side。**-〉1 more Side可能未使用ContextProvider或 Package 在App.jsx文件App.js文件中(大多数人忘记)。