reactJS中的“错误zoid破坏了所有组件”错误

Question

我在电子商务市场上工作，代码似乎没问题，但 paypal 按钮似乎首先在加载时呈现，但在 4-5 秒后消失。控制台显示“未处理的错误错误：zoid 破坏了所有组件”。我已经尝试更换浏览器，但问题仍然存在。 以下是我的代码：

  useEffect(() => {
    const addPaypalScript = async () => {
      const { data: clientId } = await axios.get(
        `/api/config/paypal/${orderId}`
      )
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}`
      script.async = true
      script.onload = () => {
        setSdkReady(true)
      }
      document.body.appendChild(script)
    }
    addPaypalScript()
    if (!order || successPay) {
      dispatch({ type: ORDER_PAY_RESET })
      dispatch(getOrderDetails(orderId))
    } else if (!order.isPaid) {
      if (!window.paypal) {
        addPaypalScript()
      } else {
        setSdkReady(true)
      }
    }
  }, [dispatch, orderId, successPay, order])

下面是paypal按钮前端代码

<ListGroup.Item>
                  <Row>
                    {loadingPay && <Loader />}
                    {!sdkReady ? (
                      <Loader />
                    ) : (
                      <PayPalButton
                        onButtonReady={() => setSdkReady(true)}
                        amount={order.totalPrice}
                        onSuccess={successPaymentHandler}
                      />
                    )}
                  </Row>
                </ListGroup.Item>

Answer 1

对于 react 中的 PayPal 按钮，使用官方的 react-paypal-js 包来处理加载脚本和渲染按钮。

这里是the documentation with a sample。