在React中调用函数并渲染子组成部分的最佳方法是什么？

Question

我有以下代码，我想调用一个函数并渲染子组件。实现这一目标的最佳方法是什么？

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

我尝试制作一个名为handleall的新功能，然后添加这样的函数：

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;

这也不起作用。当我重新加载它时，它将在MongoDB集合中添加3个相同顺序的副本。正确的方法是什么？