如何取消对componentWillUnmount的提取

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);
      });
  }

TonyStafan2020/03/13 20:16:19

除了接受的解决方案中的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
}

老丝梅2020/03/13 20:16:18

当我需要“取消所有订阅并异步”时，我通常向componentWillUnmount中的redux分发一些内容，以通知所有其他订阅者，并在必要时向服务器发送一个有关取消的其他请求

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer