ReactJS在使用useeffect分派redux动作时复制组件

Question

我是新来的。我使用react 18，所以我的问题是…我不知道刚刚发生了什么，当我分派动作和调用它与useeffect, react只是渲染组件两次，它会解决，如果我删除了strcitmode，但我不想，有人能帮助吗?所以在我看来，paypal按钮被渲染两次，如果我没有删除strictmode。我觉得使用效果有问题。

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

Answer 1

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Class component constructor, render, and shouldComponentUpdate methods

更多信息:React Docs