componentWillUnmount 메서드에서 모든 구독 및 비동기 취소 방법

componentWillUnmount 메서드에서 모든 구독 및 비동기 취소 방법

비동기 방식의 문제로 에러 메세지가 표시된다.내 터미널에는 다음이 표시됩니다.

Warning: Can't call setState (or forceUpdate) 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.
- node_modules/fbjs/lib/warning.js:33:20 in printWarning
- node_modules/fbjs/lib/warning.js:57:25 in warning
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:12196:6 in warnAboutUpdateOnUnmounted
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:13273:41 in scheduleWorkImpl
- node_modules/react-native/Libraries/Renderer/ReactNativeRenderer-dev.js:6224:19 in enqueueSetState
- node_modules/react/cjs/react.development.js:242:31 in setState
* router/_components/item.js:51:16 in getImage$
- node_modules/regenerator-runtime/runtime.js:62:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:296:30 in invoke
- ... 13 more stack frames from framework internals

특히나, 이 비디오가 지적하고 있는 것은getImage$

이 섹션에서 사용하는 코드는 다음과 같습니다.

export default class extends Component {
    constructor(props) {
        super(props);
        const { item } = props

        const bindThese = { item }
        this.boundActionCreators = bindActionCreators(bindThese)

        this.state = {
            image: require('../../static/logo.png'),
            ready: false,
            showOptions: this.props.showOptions
        }

        this.getImage = this.getImage.bind(this)
        this.renderNotAdmin = this.renderNotAdmin.bind(this)
        this.renderAdmin = this.renderAdmin.bind(this)
        this.handleOutOfStock = this.handleOutOfStock.bind(this)
    }

    async getImage(img) {
        let imgUri = await Amplify.Storage.get(img)
        let uri = await CacheManager.get(imgUri).getPath()

        this.setState({
            image: { uri },
            ready: true
        })
    }

    componentDidMount() {
        this.getImage(this.props.item.image)
    }

사용법을 알아내려고 합니다.componentWillUnmount이 비동기 방식을 사용합니다.어떻게 해야 하죠?

감사합니다!

사용할 수 있습니다.isMounted여기서 메모리 누수를 방지하기 위해 반응 패턴을 지정하십시오.

컨스트럭터:

constructor(props) {
    super(props);

    this._isMounted = false;
// rest of your code
}

componentDidMount() {
    this._isMounted = true;
    this._isMounted && this.getImage(this.props.item.image);

}

당신의 안에서componentWillUnmount

componentWillUnmount() {
   this._isMounted = false;
}

네 안에 있는 동안getImage()

async getImage(img) {
    let imgUri = await Amplify.Storage.get(img)
    let uri = await CacheManager.get(imgUri).getPath()

    this._isMounted && this.setState({
        image: { uri },
        ready: true
    })
}

취소 가능한 약속 패턴에 기반한 Axios 사용을 권장하는 접근법.따라서 컴포넌트를 마운트 해제하는 동안 네트워크 콜을 취소할 수 있습니다.cancelToken subscriptionAxios 취소를 위한 리소스입니다.

React 블로그에서

componentDidMount에서 _isMounted 속성을 true로 설정하고 componentWillUnmount에서 false로 설정한 후 이 변수를 사용하여 컴포넌트의 상태를 확인합니다.

이상적으로는 취소 가능한 콜백을 사용하여 이 문제를 해결하는 것이 좋으나, 첫 번째 해결 방법이 여기에 적합하다고 합니다.

isMounted() 함수를 사용하면 권장되지 않을 수 있습니다.

componentWillUnmount() 메서드에서 this.mounted = false를 설정하고 componentDidMount() 메서드에서 this.mounted = true를 설정해야 합니다.

setState 업데이트는 componentDidMount() 메서드로 선언해야 하는 조건부 업데이트입니다.

componentDidMount() {
        this.mounted = true;
        var myVar =  setInterval(() => {
                let nextPercent = this.state.percentage+10;
                if (nextPercent >= 100) {
                    clearInterval(myVar);
                }
                if(this.mounted) {
                    this.setState({ percentage: nextPercent });
            }
        }, 100);
}

componentWillUnmount(){
      this.mounted = false;
}

이 오류를 해결하려면setState방법

isSubscribed = true;

componentWillUnmount() {
  this.isSubscribed = false;
}

setState = (state, callback?) => {
   if (this.isSubscribed) {
     super.setState(state, callback);
   }
}

언급URL : https://stackoverflow.com/questions/52061476/cancel-all-subscriptions-and-asyncs-in-the-componentwillunmount-method-how