如何在 React 严格模式下修复重复的 Paypal 按钮

Question

大家好，我想知道在更新到 React 18 后如何解决这个问题我有一个重复的 由于在 StrictMode 下的 useEffect 按钮。任何指南如何取消订阅此 API 调用 或者也许使用适当的清理来修复它。提前致谢。

const paypalbutton = useRef();

useEffect(() => {

    const addPayPalScript = async () => {

        const { data } = await axios('/api/config/paypal');
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = `https://www.paypal.com/sdk/js?client-id=${data}`;
        script.async = true;
        script.onload = async () => { setSdkReady(true) };

        paypalbutton.current.appendChild(script)
    };

  // inside render()
        <li ref={paypalbutton} id="paypal-button" className="row center">
     
          </li>

Answer 1

React 严格模式故意运行useEffect 回调两次以捕获滥用useEffect，这就是这里发生的事情。

你需要做两件事：

1. 使您的异步副作用可取消；和
2. 返回一个清理函数，它将
   • 取消正在进行的副作用；或者
   • 如果完成，请撤消副作用。

   useEffect(() => {
       const controller = new AbortController();
       let script
   
       const addPayPalScript = async () => {
           const { data } = await axios.get(
               '/api/config/paypal',
               { signal: controller.signal }
           )
   
           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)
           }
   
           paypalbutton.current.appendChild(script)
           completed = true
       }
   
       let completed = false
   
       addPayPalScript().then(() => {
           completed = true
       })
   
       return () => {
           controller.abort()
   
           if (completed) {
               paypalbutton.current.removeChild(script)
           }
       }
   }, [/* not sure what goes here... */])
   

Answer 2

我通过降级到 React 17.02 来修复它

npm uninstall react react-dom

npm install react@17.0.2 react-dom@17.0.2