上下文API，无法检索我在单独组件中设置的数据

Question

正在处理我的一个小项目，但在使用所谓的Context API时遇到了问题。第一次也这么做。

我遇到的问题是无法对我正在设置的数据进行console.log。现在我正试图制作一个"；添加到购物车"；按钮，以及每当按下该按钮时。一个包含名称、价格、颜色等内容的对象将被发送到我的ShoppingCart组件。

每当我按下按钮时，我都可以设置该值。它出现在console.log中。但是，我无法从ShoppingCart中console.log值。

我的文件如下：

./Contexts
./AddToCartContext.js
./Components
./Product
./ProductContent.js  // Here the "add to cart" button is located.
./ShoppingCart
./ShoppingCart.js // Here I need the data from ProductContent.js
App.js

这是我的App.js代码：

const [cartItems, setCartItems] = useState({});
console.log(cartItems); // The data is being logged here perfectly.
return (
<AddToCartContext.Provider value={{ cartItems, setCartItems }}>
<ThemeProvider theme={themeMode}>
{/* GlobalStyles skapas i ./themes.js */}
<GlobalStyles />
<Router>
<Route exact path="/cart">
<ShoppingCart theme={theme} toggleTheme={toggleTheme} />
</Route>
<Route exact path="/category/:type/:id/:productid">
<FetchAPI />
</Route>
// ...
</Router>
</ThemeProvider>
</AddToCartContext.Provider>
);

这是我的shoppingcart.js代码：

import { AddToCartContext } from "../../Contexts/AddToCartContext";
const ShoppingCart = (props) => {
const { cartItems } = useContext(AddToCartContext);
console.log(cartItems); // This always result in an empty Object.
return (
<Fragment>
<TopNavigation />
<BottomNavigation theme={props.theme} toggleTheme={props.toggleTheme} />
<Cart />
<Footer />
</Fragment>
);
};

这里是ProductContent.js中的代码(由于它很长而缩短(：

import { AddToCartContext } from "../../Contexts/AddToCartContext";
const ProductContent = (props) => {
const { setCartItems } = useContext(AddToCartContext);
return (
<button
type="button"
onClick={() =>
setCartItems({ // This returns the object to App.js, but not Shoppingcart.js
name: props.name,
price: props.price,
color: props.mainImg?.colour,
img: props.mainImg?.url,
id: params.productid,
})
}
className={classes.add_to_cart}
>
<Cart />
add to cart
</button>
);
}

如前所述，这是我第一次使用Context API。我遗漏了什么吗？

编辑：

做了一些测试，如果我将const [cartItems, setCartItems] = useState({});的初始值设置为例如"0"；测试"；，则它在Cart页面内呈现。

按下按钮后，购物车内没有任何内容。但是每当初始值被设置为"0"时；测试"；它被立即加载。

以下是创建上下文的代码(AddToCartContext.js(：

import { createContext } from "react";
export const AddToCartContext = createContext({});

Answer 1

在下面这样尝试不进行破坏

const  cartItems  = useContext(AddToCartContext);
console.log(cartItems);

并检查该对象中是否有任何内容