Sorun

React'te bir uygulama yazıyorum ve daha setState(...)sonra arayan süper yaygın bir tuzaktan kaçınamadım componentWillUnmount(...).

Koduma çok dikkatli baktım ve bazı koruma maddeleri koymaya çalıştım, ancak sorun devam etti ve hala uyarıyı gözlemliyorum.

Bu nedenle, iki sorum var:

1. Yığın izlemeden , kural ihlalinden hangi bileşenin ve olay işleyicisinin veya yaşam döngüsü kancasının sorumlu olduğunu nasıl anlayabilirim ?
2. Peki, sorunun kendisi nasıl çözülür, çünkü kodum bu tuzak düşünülerek yazılmıştı ve zaten onu önlemeye çalışıyor, ancak bazı temel bileşenler hala uyarıyı oluşturuyor.

Tarayıcı konsolu

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount
method.
    in TextLayerInternal (created by Context.Consumer)
    in TextLayer (created by PageInternal) index.js:1446
d/console[e]
index.js:1446
warningWithoutStack
react-dom.development.js:520
warnAboutUpdateOnUnmounted
react-dom.development.js:18238
scheduleWork
react-dom.development.js:19684
enqueueSetState
react-dom.development.js:12936
./node_modules/react/cjs/react.development.js/Component.prototype.setState
react.development.js:356
_callee$
TextLayer.js:97
tryCatch
runtime.js:63
invoke
runtime.js:282
defineIteratorMethods/</prototype[method]
runtime.js:116
asyncGeneratorStep
asyncToGenerator.js:3
_throw
asyncToGenerator.js:29

Kod

Book.tsx

import { throttle } from 'lodash';
import * as React from 'react';
import { AutoWidthPdf } from '../shared/AutoWidthPdf';
import BookCommandPanel from '../shared/BookCommandPanel';
import BookTextPath from '../static/pdf/sde.pdf';
import './Book.css';

const DEFAULT_WIDTH = 140;

class Book extends React.Component {
  setDivSizeThrottleable: () => void;
  pdfWrapper: HTMLDivElement | null = null;
  isComponentMounted: boolean = false;
  state = {
    hidden: true,
    pdfWidth: DEFAULT_WIDTH,
  };

  constructor(props: any) {
    super(props);
    this.setDivSizeThrottleable = throttle(
      () => {
        if (this.isComponentMounted) {
          this.setState({
            pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
          });
        }
      },
      500,
    );
  }

  componentDidMount = () => {
    this.isComponentMounted = true;
    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    this.isComponentMounted = false;
    window.removeEventListener("resize", this.setDivSizeThrottleable);
  };

  render = () => (
    <div className="Book">
      { this.state.hidden && <div className="Book__LoadNotification centered">Book is being loaded...</div> }

      <div className={this.getPdfContentContainerClassName()}>
        <BookCommandPanel
          bookTextPath={BookTextPath}
          />

        <div className="Book__PdfContent" ref={ref => this.pdfWrapper = ref}>
          <AutoWidthPdf
            file={BookTextPath}
            width={this.state.pdfWidth}
            onLoadSuccess={(_: any) => this.onDocumentComplete()}
            />
        </div>

        <BookCommandPanel
          bookTextPath={BookTextPath}
          />
      </div>
    </div>
  );

  getPdfContentContainerClassName = () => this.state.hidden ? 'hidden' : '';

  onDocumentComplete = () => {
    try {
      this.setState({ hidden: false });
      this.setDivSizeThrottleable();
    } catch (caughtError) {
      console.warn({ caughtError });
    }
  };
}

export default Book;

AutoWidthPdf.tsx

import * as React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

interface IProps {
  file: string;
  width: number;
  onLoadSuccess: (pdf: any) => void;
}
export class AutoWidthPdf extends React.Component<IProps> {
  render = () => (
    <Document
      file={this.props.file}
      onLoadSuccess={(_: any) => this.props.onLoadSuccess(_)}
      >
      <Page
        pageNumber={1}
        width={this.props.width}
        />
    </Document>
  );
}

Güncelleme 1: Kısılabilir işlevi iptal edin (hala şans yok)

const DEFAULT_WIDTH = 140;

class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  pdfWrapper: HTMLDivElement | null = null;
  state = {
    hidden: true,
    pdfWidth: DEFAULT_WIDTH,
  };

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };

  render = () => (
    <div className="Book">
      { this.state.hidden && <div className="Book__LoadNotification centered">Book is being loaded...</div> }

      <div className={this.getPdfContentContainerClassName()}>
        <BookCommandPanel
          BookTextPath={BookTextPath}
          />

        <div className="Book__PdfContent" ref={ref => this.pdfWrapper = ref}>
          <AutoWidthPdf
            file={BookTextPath}
            width={this.state.pdfWidth}
            onLoadSuccess={(_: any) => this.onDocumentComplete()}
            />
        </div>

        <BookCommandPanel
          BookTextPath={BookTextPath}
          />
      </div>
    </div>
  );

  getPdfContentContainerClassName = () => this.state.hidden ? 'hidden' : '';

  onDocumentComplete = () => {
    try {
      this.setState({ hidden: false });
      this.setDivSizeThrottleable!();
    } catch (caughtError) {
      console.warn({ caughtError });
    }
  };
}

export default Book;

İşte React Hooks'a özel bir çözüm

Hata

Uyarı: Bağlanmayan bir bileşende React durum güncellemesi gerçekleştirilemez.

Çözüm

Bileşen kaldırılır kaldırılmaz temizleme geri aramasında değiştirilecek olan let isMounted = trueiçeriyi bildirebilirsiniz useEffect. Durum güncellemelerinden önce, şimdi bu değişkeni koşullu olarak kontrol edersiniz:

useEffect(() => {
  let isMounted = true; // note this flag denote mount status
  someAsyncOperation().then(data => {
    if (isMounted) setState(data);
  })
  return () => { isMounted = false }; // use effect cleanup to set flag false, if unmounted
});

const Parent = () => {
  const [mounted, setMounted] = useState(true);
  return (
    <div>
      Parent:
      <button onClick={() => setMounted(!mounted)}>
        {mounted ? "Unmount" : "Mount"} Child
      </button>
      {mounted && <Child />}
      <p>
        Unmount Child, while it is still loading. It won't set state later on,
        so no error is triggered.
      </p>
    </div>
  );
};

const Child = () => {
  const [state, setState] = useState("loading (4 sec)...");
  useEffect(() => {
    let isMounted = true; // note this mounted flag
    fetchData();
    return () => {
      isMounted = false;
    }; // use effect cleanup to set flag false, if unmounted

    // simulate some Web API fetching
    function fetchData() {
      setTimeout(() => {
        // drop "if (isMounted)" to trigger error again
        if (isMounted) setState("data fetched");
      }, 4000);
    }
  }, []);

  return <div>Child: {state}</div>;
};

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Uzatma: Özel useAsyncKanca

Tüm kazan plakasını, bileşenin daha önce ayrılması durumunda zaman uyumsuz işlevlerin nasıl üstesinden gelineceğini ve otomatik olarak durdurulacağını bilen özel bir Kanca içine yerleştirebiliriz:

function useAsync(asyncFn, onSuccess) {
  useEffect(() => {
    let isMounted = true;
    asyncFn().then(data => {
      if (isMounted) onSuccess(data);
    });
    return () => { isMounted = false };
  }, [asyncFn, onSuccess]);
}

// use async operation with automatic abortion on unmount
function useAsync(asyncFn, onSuccess) {
  useEffect(() => {
    let isMounted = true;
    asyncFn().then(data => {
      if (isMounted) onSuccess(data);
    });
    return () => {
      isMounted = false;
    };
  }, [asyncFn, onSuccess]);
}

const Child = () => {
  const [state, setState] = useState("loading (4 sec)...");
  useAsync(delay, setState);
  return <div>Child: {state}</div>;
};

const Parent = () => {
  const [mounted, setMounted] = useState(true);
  return (
    <div>
      Parent:
      <button onClick={() => setMounted(!mounted)}>
        {mounted ? "Unmount" : "Mount"} Child
      </button>
      {mounted && <Child />}
      <p>
        Unmount Child, while it is still loading. It won't set state later on,
        so no error is triggered.
      </p>
    </div>
  );
};

const delay = () => new Promise(resolve => setTimeout(() => resolve("data fetched"), 4000));


ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Kaldırmak için - Bağlanmayan bir bileşen uyarısında React durum güncellemesi gerçekleştirilemez, bir koşul altında componentDidMount yöntemini kullanın ve componentWillUnmount yönteminde bu koşulu yanlış yapın. Örneğin : -

class Home extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    ajaxVar
      .get('https://domain')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            news: result.data.hits,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}

Yukarıdaki çözümler işe yaramazsa, bunu deneyin ve benim için çalışıyor:

componentWillUnmount() {
    // fix Warning: Can't perform a React state update on an unmounted component
    this.setState = (state,callback)=>{
        return;
    };
}

Ben muhtemelen çünkü çağıran bu uyarıyı vardı setState(Bu, bu 3 tartışılmıştır bir efekt kancadan konularda bağlantılı birlikte ).

Her neyse, react sürümünü yükseltmek uyarıyı kaldırdı.

değiştirmeyi deneyin setDivSizeThrottleableiçin

this.setDivSizeThrottleable = throttle(
  () => {
    if (this.isComponentMounted) {
      this.setState({
        pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
      });
    }
  },
  500,
  { leading: false, trailing: true }
);

Geçmişi kullanmadığınızı biliyorum, ancak benim durumumda useHistory, React Bağlam Sağlayıcımda durum kalıcı olmadan önce bileşenin bağlantısını kesen React Router DOM'un kancasını kullanıyordum .

Bu sorunu çözmek withRouteriçin, benim durumumda export default withRouter(Login)ve bileşenin içinde bileşeni yerleştiren kancayı kullandım const Login = props => { ...; props.history.push("/dashboard"); .... Diğerini de props.history.pushbileşenden kaldırdım , örneğin if(authorization.token) return props.history.push('/dashboard')bu durum nedeniyle bir döngüye neden olduğu için authorization.

Bir alternatif yeni bir öğe itmek tarih .

Axios'tan veri alıyorsanız ve hata hala devam ediyorsa, ayarlayıcıyı koşulun içine sarmanız yeterlidir.

let isRendered = useRef(false);
useEffect(() => {
    isRendered = true;
    axios
        .get("/sample/api")
        .then(res => {
            if (isRendered) {
                setState(res.data);
            }
            return null;
        })
        .catch(err => console.log(err));
    return () => {
        isRendered = false;
    };
}, []);

Düzenleme: Uyarının adlı bir bileşene başvurduğunu fark ettim TextLayerInternal. Muhtemelen böceğiniz burada. Bunun geri kalanı hala geçerlidir, ancak sorununuzu çözmeyebilir.

1) Bu uyarı için bir bileşenin örneğini almak zordur. React'te bunu geliştirmek için bazı tartışmalar var gibi görünüyor ancak şu anda bunu yapmanın kolay bir yolu yok. Henüz oluşturulmamış olmasının nedeni, muhtemelen bileşenlerin, unmount'tan sonra setState'in bileşenin durumu ne olursa olsun mümkün olmayacağı şekilde yazılmasının beklenmesidir. React ekibi söz konusu olduğunda sorun her zaman Bileşen kodundadır ve Bileşen örneğinde değildir, bu nedenle Bileşen Türü adını alırsınız.

Bu cevap tatmin edici olmayabilir, ancak sorununuzu çözebileceğimi düşünüyorum.

2) Lodashes throttled fonksiyonu bir cancelmetoda sahiptir. Çağrı canceliçinde componentWillUnmountve hendek isComponentMounted. İptal etmek, yeni bir özellik sunmaktan daha "deyimsel olarak" tepki vermektir.

Benzer bir sorun yaşadım teşekkürler @ ford04 bana yardımcı oldu.

Ancak başka bir hata oluştu.

NB. ReactJS kancaları kullanıyorum

ndex.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Hataya ne sebep olur?

import {useHistory} from 'react-router-dom'

const History = useHistory()
if (true) {
  history.push('/new-route');
}
return (
  <>
    <render component />
  </>
)

Bu işe yaramadı çünkü yeni sayfaya yönlendiriyor olmanıza rağmen tüm durum ve proplar dom üzerinde manipüle ediliyor ya da sadece önceki sayfaya işleme durmadı.

Hangi çözümü buldum

import {Redirect} from 'react-router-dom'

if (true) {
  return <redirect to="/new-route" />
}
return (
  <>
    <render component />
  </>
)

Benzer bir sorun yaşadım ve çözdüm:

Redux ile ilgili bir eylem göndererek kullanıcının otomatik olarak oturum açmasını sağlıyordum (doğrulama jetonunu redux durumuna yerleştirerek)

ve sonra bileşenimde this.setState ({succ_message: "...") ile bir mesaj göstermeye çalışıyordum.

Bileşen, konsolda aynı hatayla boş görünüyordu: "çıkarılmış bileşen" .. "bellek sızıntısı" vb.

Walter'ın bu konudaki cevabını okuduktan sonra

Uygulamamın Yönlendirme tablosunda, kullanıcı oturum açmışsa bileşenimin rotasının geçerli olmadığını fark ettim:

{!this.props.user.token &&
        <div>
            <Route path="/register/:type" exact component={MyComp} />                                             
        </div>
}

Jeton var olsa da olmasa da Rotayı görünür hale getirdim.

@ Ford04 cevabına göre, burada aynı yöntem bir yöntemde özetlenmiştir:

import React, { FC, useState, useEffect, DependencyList } from 'react';

export function useEffectAsync( effectAsyncFun : ( isMounted: () => boolean ) => unknown, deps?: DependencyList ) {
    useEffect( () => {
        let isMounted = true;
        const _unused = effectAsyncFun( () => isMounted );
        return () => { isMounted = false; };
    }, deps );
} 

Kullanım:

const MyComponent : FC<{}> = (props) => {
    const [ asyncProp , setAsyncProp ] = useState( '' ) ;
    useEffectAsync( async ( isMounted ) =>
    {
        const someAsyncProp = await ... ;
        if ( isMounted() )
             setAsyncProp( someAsyncProp ) ;
    });
    return <div> ... ;
} ;