Tengo el siguiente código, quiero llamar a una función y hacer clic en un componente secundario. ¿Cuál es la mejor manera de lograr esto?

 import AddOrder from './AddOrder' return ( <Button onClick={handleCheckout}>Checkout</Button> ) const handleCheckout = () => { <AddOrder /> fetch("http://localhost:5000/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ items: data?.getUser ? data.getUser.cart : cart, email: currentUser ? currentUser.email : undefined, }), }) .then(async (res) => { if (res.ok) return res.json(); const json = await res.json(); return await Promise.reject(json); }) .then(({ url }) => { window.location = url; }) .catch((e) => { console.error(e.error); }); };

Intenté hacer una nueva función llamada handleAll y agregarla así:

 function handleAll(){ handleCheckout() <AddOrder /> }

AddOrder.js:

 function AddOrder() { const d = new Date(); let text = d.toString(); const { currentUser } = useContext(AuthContext); const { data, loading, error } = useQuery(queries.GET_USER_BY_ID, { fetchPolicy: "cache-and-network", variables: { id: currentUser.uid }, }); const [addOrder] = useMutation(queries.ADD_ORDER); useEffect(() => { console.log('hi') }) if(error) { return <h1> error</h1>; } if(loading) { return <h1> loading</h1>; } if (data){ let newCart = [] for(let i=0; i< data.getUser.cart.length; i++){ newCart.push({quantity: data.getUser.cart[i].quantity, _id: data.getUser.cart[i]._id}) } console.log(newCart) addOrder({ variables: { userId: currentUser.uid, status: 'ordered', createdAt: text, products: newCart } }); console.log("hello") } } export default AddOrder;

Esto no funcionó bien. Cuando recargo esto, agrega 3 copias del mismo pedido a la colección mongodb. ¿Cuál es la manera correcta de hacer esto?