ReactJS在使用useeffect调度redux动作时重复组件

Question

我是新的反应。 我使用react 18，所以我的问题是..我不知道发生了什么，当我调度动作并使用useeffect调用它时，react只渲染组件两次，如果我删除strcitmode，它将解决，但我不想，有人可以帮忙吗？ 所以在我看来，如果我不删除严格模式，paypal 按钮会被渲染两次。 我认为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}
      />
)

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

更多信息： 反应文档