如何取消对componentWillUnmount的提取

reactjs React.js

Pro神无猴子

2020-03-13

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

安慰

警告：无法在未安装的组件上调用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);
      });
  }

第1535篇《如何取消对componentWillUnmount的提取》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

TonyStafan 2020.03.13

除了接受的解决方案中的cancellable promise hooks示例之外，拥有一个useAsyncCallback包装请求回调并返回cancellable promise 的钩子也很方便。想法是一样的，但是钩子就像常规的钩子一样工作useCallback。这是一个实现示例：

function useAsyncCallback<T, U extends (...args: any[]) => Promise<T>>(callback: U, dependencies: any[]) {
  const isMounted = useRef(true)

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

  const cb = useCallback(callback, dependencies)

  const cancellableCallback = useCallback(
    (...args: any[]) =>
      new Promise<T>((resolve, reject) => {
        cb(...args).then(
          value => (isMounted.current ? resolve(value) : reject({ isCanceled: true })),
          error => (isMounted.current ? reject(error) : reject({ isCanceled: true }))
        )
      }),
    [cb]
  )

  return cancellableCallback
}