如何在react中使用useEffect设置本地存储后，在render中将数据填充到购物车中

import React, { useEffect, useState } from 'react';

const ShoppingCart = () => {
  const [cartData, setCartData] = useState([]);

  useEffect(() => {
    // 从本地存储获取购物车数据
    const storedCartData = localStorage.getItem('cartData');
    if (storedCartData) {
      setCartData(JSON.parse(storedCartData));
    }
  }, []);

  return (
    <div>
      <h2>购物车</h2>
      {cartData.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.price}</p>
        </div>
      ))}
    </div>
  );
};

const ShoppingCart = () => {
  const [cartData, setCartData] = useState([]);

  useEffect(() => {
    // 从本地存储获取购物车数据
    const storedCartData = localStorage.getItem('cartData');
    if (storedCartData) {
      setCartData(JSON.parse(storedCartData));
    }
  }, []);

  // 将数据添加到购物车并更新本地存储
  const addToCart = (item) => {
    const updatedCartData = [...cartData, item];
    setCartData(updatedCartData);
    localStorage.setItem('cartData', JSON.stringify(updatedCartData));
  };

  return (
    <div>
      <h2>购物车</h2>
      {cartData.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.price}</p>
        </div>
      ))}
    </div>
  );
};

const Product = ({ id, name, price }) => {
  const addToCart = () => {
    // 调用购物车组件中的addToCart方法
    ShoppingCart.addToCart({ id, name, price });
  };

  return (
    <div>
      <p>{name}</p>
      <p>{price}</p>
      <button onClick={addToCart}>添加到购物车</button>
    </div>
  );
};