im new on react. im using react 18, so my problem is.. i dont know what just happen, when i dispatched the action and call it with useeffect, react just render the component twice, it will solve if i remove the strcitmode, but i dont want to, can somebody help? so in my view, the paypal button get rendered twice if i'm not remove the strictmode. i think there's something wrong on useeffect..
orderScreen.jsx
const dispatch = useDispatch();
const [sdkReady, setSdkReady] = useState(false);
useEffect(() => {
const addPaypalScript = async () => {
const res = await axios.get(`http://localhost:8000/api/config/paypal`);
const data = await res.data;
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `https://www.paypal.com/sdk/js?client-id=${data}`;
script.async = true;
script.onload = () => {
setSdkReady(true);
};
document.body.appendChild(script);
return data;
};
(async () => await addPaypalScript())();
if (!order || success) {
dispatch(orderDetail(orderId));
} else if (!order.isPaid) {
if (!window.paypal) {
return addPaypalScript();
} else {
setSdkReady(true);
}
}
return () => {
dispatch(orderPayReset());
};
}, [dispatch]);
return(
<PayPalButton
amount={order.totalPrice}
onSuccess={successPaymentHandler}
/>
)
