reactjs重复组件时，当用使用效率调度Redux Action时

发布于 2025-02-12 10:02:41 字数 1289 浏览 1 评论 0原文

我是新的反应。我正在使用React 18，所以我的问题是..我不知道发生了什么，当我派遣操作并用使用效率调用它时，fores刚好渲染组件两次，如果我删除strcitmode，它将解决，但我不想去，有人可以帮忙吗？因此，在我看来，如果我不删除严格模式，则PayPal按钮将渲染两次。我认为使用效率有问题。

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暗藏城府 2025-02-19 10:02:41

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

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

More Info : React Docs

回复收藏 0 原文

~没有更多了~