Javascript 反应-Can'；t记录ContextAPI中的值，但可以设置该值

在我的一个小项目中工作，在使用上下文API时遇到了一个问题

我正在为我的项目制作一个“添加到购物车”功能，并将使用上下文API将我添加到购物车的产品的数据发送到购物车

到目前为止，我已经设置了上下文，我可以单击“添加到购物车”按钮，它将把数据记录在

App.js

中

但是，我无法将数据记录在我的

Cart.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>
);

这是我的

ProductContent.js

代码（按钮所在位置|代码缩短为相当长）：

从“./../contents/AddToCartContext”导入{AddToCartContext}”；
const ProductContent=（道具）=>{
const{setCartItems}=useContext（AddToCartContext）；
返回(
setCartItems（{//这会将对象返回到App.js，但不会返回Shoppingcart.js
名称：props.name，
价格：道具价格，
颜色：道具。维护？颜色，
img:props.mainImg？.url，
id:params.productid，
})
}
className={classes.add_to_cart}
>
添加到购物车
);
}

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>
  );
};

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>
);
}