reactjs - 如何取消componentWillUnmount上的提取




react-native (5)

React的友好人员 建议 将您的提取电话/承诺包装在可取消的承诺中。 虽然该文档中没有建议使用fetch将代码与类或函数分开,但这似乎是可取的,因为其他类和函数可能需要此功能,代码重复是反模式,并且无论延迟代码如何应在 componentWillUnmount() 处理或取消。 根据React,您可以在 componentWillUnmount 对包装的promise调用 cancel() ,以避免在卸载的组件上设置状态。

如果我们使用React作为指南,提供的代码看起来就像这些代码片段:

const makeCancelable = (promise) => {
    let hasCanceled_ = false;

    const wrappedPromise = new Promise((resolve, reject) => {
        promise.then(
            val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
            error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
        );
    });

    return {
        promise: wrappedPromise,
        cancel() {
            hasCanceled_ = true;
        },
    };
};

const cancelablePromise = makeCancelable(fetch('LINK HERE'));

constructor(props){
    super(props);
    this.state = {
        isLoading: true,
        dataSource: [{
            name: 'loading...',
            id: 'loading',
        }]
    }
}

componentDidMount(){
    cancelablePromise.
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                isLoading: false,
                dataSource: responseJson,
            }, () => {

            });
        })
        .catch((error) =>{
            console.error(error);
        });
}

componentWillUnmount() {
    cancelablePromise.cancel();
}

----编辑----

通过在GitHub上关注问题,我发现给定的答案可能不太正确。 这是我使用的一个版本,它适用于我的目的:

export const makeCancelableFunction = (fn) => {
    let hasCanceled = false;

    return {
        promise: (val) => new Promise((resolve, reject) => {
            if (hasCanceled) {
                fn = null;
            } else {
                fn(val);
                resolve(val);
            }
        }),
        cancel() {
            hasCanceled = true;
        }
    };
};

这个想法是通过使函数或任何你使用null的东西来帮助垃圾收集器释放内存。

我认为标题说明了一切。 每次卸载仍在提取的组件时都会显示黄色警告。

安慰

警告:无法在卸载的组件上调用 setState (或 forceUpdate )。 这是一个无操作,但是......要修复,取消 componentWillUnmount 方法中的所有订阅和异步任务。

  constructor(props){
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [{
        name: 'loading...',
        id: 'loading',
      }]
    }
  }

  componentDidMount(){
    return fetch('LINK HERE')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson,
        }, function(){
        });
      })
      .catch((error) =>{
        console.error(error);
      });
  }

当您触发Promise时,它可能需要几秒钟才能结算,到那时用户可能已导航到您应用中的其他位置。 因此,当Promise解析 setState 在未安装的组件上执行时,您会收到错误 - 就像您的情况一样。 这也可能导致内存泄漏。

这就是为什么最好将一些异步逻辑从组件中移出。

否则,你需要以某种方式 取消你的承诺 。 或者 - 作为最后的手段技术(它是反模式) - 你可以保留一个变量来检查组件是否仍然被挂载:

componentDidMount(){
  this.mounted = true;

  this.props.fetchData().then((response) => {
    if(this.mounted) {
      this.setState({ data: response })
    }
  })
}

componentWillUnmount(){
  this.mounted = false;
}

我将再次强调 - 这 是一个反模式, 但在你的情况下可能就足够了(就像他们对 Formik 实现一样)。

关于 GitHub 的类似讨论

编辑:

这可能是我如何用 Hooks 解决同样的问题(只有React):

选项A:

import React, { useState, useEffect } from "react";

export default function Page() {
  const value = usePromise("https://something.com/api/");
  return (
    <p>{value ? value : "fetching data..."}</p>
  );
}

function usePromise(url) {
  const [value, setState] = useState(null);

  useEffect(() => {
    let isMounted = true; // track whether component is mounted

    request.get(url)
      .then(result => {
        if (isMounted) {
          setState(result);
        }
      });

    return () => {
      // clean up
      isMounted = false;
    };
  }, []); // only on "didMount"

  return value;
}

选项B: 或者使用 useRef ,其行为类似于类的静态属性,这意味着它在值改变时不会使组件重新呈现:

function usePromise2(url) {
  const isMounted = React.useRef(true)
  const [value, setState] = useState(null);


  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    request.get(url)
      .then(result => {
        if (isMounted.current) {
          setState(result);
        }
      });
  }, []);

  return value;
}

// or extract it to custom hook:
function useIsMounted() {
  const isMounted = React.useRef(true)

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  return isMounted; // returning "isMounted.current" wouldn't work because we would return unmutable primitive
}

示例: https://codesandbox.io/s/86n1wq2z8https://codesandbox.io/s/86n1wq2z8


您可以使用 AbortController 取消获取请求。

class FetchComponent extends React.Component{
  state = { todos: [] };
  
  controller = new AbortController();
  
  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/todos',{
      signal: this.controller.signal
    })
    .then(res => res.json())
    .then(todos => this.setState({ todos }))
    .catch(e => alert(e.message));
  }
  
  componentWillUnmount(){
    this.controller.abort();
  }
  
  render(){
    return null;
  }
}

class App extends React.Component{
  state = { fetch: true };
  
  componentDidMount(){
    this.setState({ fetch: false });
  }
  
  render(){
    return this.state.fetch && <FetchComponent/>
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>


我想我找到了解决方法。 问题不在于获取本身,而是在组件被解除后的setState。 所以解决方案是将 this.state.isMounted 设置为 false ,然后在 componentWillMount this.state.isMounted 其更改为true,并在 componentWillUnmount 再次设置为false。 然后就是 if(this.state.isMounted) fetch中的setState。 像这样:

  constructor(props){
    super(props);
    this.state = {
      isMounted: false,
      isLoading: true,
      dataSource: [{
        name: 'loading...',
        id: 'loading',
      }]
    }
  }

  componentDidMount(){
    this.setState({
      isMounted: true,
    })

    return fetch('LINK HERE')
      .then((response) => response.json())
      .then((responseJson) => {
        if(this.state.isMounted){
          this.setState({
            isLoading: false,
            dataSource: responseJson,
          }, function(){
          });
        }
      })
      .catch((error) =>{
        console.error(error);
      });
  }

  componentWillUnmount() {
    this.setState({
      isMounted: false,
    })
  }

这个警告的关键在于你的组件引用了一些由一些出色的回调/承诺保留的引用。

为了避免反模式保持你的isMounted状态(这使你的组件保持活着),就像在第二种模式中所做的那样,反应网站建议 使用可选的承诺 ; 但是,该代码似乎也可以使您的对象保持活力。

相反,我通过使用带有嵌套绑定函数的闭包来完成它。

这是我的构造函数(打字稿)......

constructor(props: any, context?: any) {
    super(props, context);

    let cancellable = {
        // it's important that this is one level down, so we can drop the
        // reference to the entire object by setting it to undefined.
        setState: this.setState.bind(this)
    };

    this.componentDidMount = async () => {
        let result = await fetch(…);            
        // ideally we'd like optional chaining
        // cancellable.setState?.({ url: result || '' });
        cancellable.setState && cancellable.setState({ url: result || '' });
    }

    this.componentWillUnmount = () => {
        cancellable.setState = undefined; // drop all references.
    }
}