下面是最简单和最紧凑的解决方案(带有解释)，它是一行程序解决方案。

useEffect(() => { return () => {}; }, []);

上面的useEffect()示例返回一个回调函数，触发React在更新状态之前完成其生命周期的卸载部分。

这个非常简单的解决方案就是我们所需要的。此外，它的工作方式也不同于@ford04和@ sfleletche提供的虚构语法。顺便说一下，下面来自@ford04的代码片段是纯虚构语法(@ sflletche、@vinod、@guneetgstar和@Drew Cordano使用了完全相同的虚构语法)。

data =>{<——虚构/虚构语法

someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })

我所有的linter和我整个团队的所有linter都不会接受它，他们报告Uncaught SyntaxError: unexpected令牌:'=>'。我感到惊讶的是，竟然没有人知道这个虚构的语法。有谁参与了这个问题的讨论，特别是那些支持他们的人，能不能向我解释一下他们是如何找到对他们有用的解决方案的?

这里有一个简单的解决方案。这个警告是由于当我们在后台执行一些取回请求时(因为一些请求需要一些时间)，我们从那个屏幕导航回来，然后他们的反应不能更新状态。下面是示例代码。在每次状态更新之前写这一行。

if(!isScreenMounted.current) return;

这里是完整的代码

import React , {useRef} from 'react'
import { Text,StatusBar,SafeAreaView,ScrollView, StyleSheet } from 'react-native'
import BASEURL from '../constants/BaseURL';
const SearchScreen = () => {
    const isScreenMounted = useRef(true)
    useEffect(() => {
        return () =>  isScreenMounted.current = false
    },[])

    const ConvertFileSubmit = () => {
        if(!isScreenMounted.current) return;
         setUpLoading(true)
 
         var formdata = new FormData();
         var file = {
             uri: `file://${route.params.selectedfiles[0].uri}`,
             type:`${route.params.selectedfiles[0].minetype}`,
             name:`${route.params.selectedfiles[0].displayname}`,
         };
         
         formdata.append("file",file);
         
         fetch(`${BASEURL}/UploadFile`, {
             method: 'POST',
             body: formdata,
             redirect: 'manual'
         }).then(response => response.json())
         .then(result => {
             if(!isScreenMounted.current) return;
             setUpLoading(false)    
         }).catch(error => {
             console.log('error', error)
         });
     }

    return(
    <>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
            <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={styles.scrollView}>
               <Text>Search Screen</Text>
            </ScrollView>
        </SafeAreaView>
    </>
    )
}

export default SearchScreen;


const styles = StyleSheet.create({
    scrollView: {
        backgroundColor:"red",
    },
    container:{
        flex:1,
        justifyContent:"center",
        alignItems:"center"
    }
})

移除-不能对卸载的组件警告执行React状态更新，在条件下使用componentDidMount方法，并在componentWillUnmount方法上使该条件为假。例如:-

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() {
    ...
  }
}

下面是最简单和最紧凑的解决方案(带有解释)，它是一行程序解决方案。

useEffect(() => { return () => {}; }, []);

上面的useEffect()示例返回一个回调函数，触发React在更新状态之前完成其生命周期的卸载部分。

这个非常简单的解决方案就是我们所需要的。此外，它的工作方式也不同于@ford04和@ sfleletche提供的虚构语法。顺便说一下，下面来自@ford04的代码片段是纯虚构语法(@ sflletche、@vinod、@guneetgstar和@Drew Cordano使用了完全相同的虚构语法)。

data =>{<——虚构/虚构语法

someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })

我所有的linter和我整个团队的所有linter都不会接受它，他们报告Uncaught SyntaxError: unexpected令牌:'=>'。我感到惊讶的是，竟然没有人知道这个虚构的语法。有谁参与了这个问题的讨论，特别是那些支持他们的人，能不能向我解释一下他们是如何找到对他们有用的解决方案的?

为jsx组件添加一个引用，然后检查它是否存在

function Book() {
  const ref = useRef();

  useEffect(() => {
    asyncOperation().then(data => {
      if (ref.current) setState(data);
    })
  });

  return <div ref={ref}>content</div>
}

isMounted方法在大多数情况下是一种反模式，因为它实际上并不清理/取消任何东西，它只是避免更改未挂载组件的状态，但对挂起的异步任务不做任何操作。React团队最近删除了泄漏警告，因为用户不断创建大量反模式来隐藏警告，而不是修复其原因。

但是用纯JS编写可取消的代码确实很棘手。为了解决这个问题，我用自定义钩子制作了自己的库useAsyncEffect2，构建在一个可取消的承诺(c-promise2)之上，用于执行可取消的异步代码以达到其优雅的取消。所有异步阶段(承诺)，包括深层的，都是可以取消的。这意味着如果其父上下文被取消，这里的请求将自动中止。当然，可以使用任何其他异步操作来代替请求。

useAsyncEffect演示与普通useState使用(现场演示):

    import React, { useState } from "react";
    import { useAsyncEffect } from "use-async-effect2";
    import cpAxios from "cp-axios";
    
    function TestComponent({url}) {
      const [text, setText] = useState("");
    
      const cancel = useAsyncEffect(
        function* () {
          setText("fetching...");
          const json = (yield cpAxios(url)).data;
          setText(`Success: ${JSON.stringify(json)}`);
        },
        [url]
      );
    
      return (
        <div>
          <div>{text}</div>
          <button onClick={cancel}>
            Cancel request
          </button>
        </div>
      );
    }

useAsyncEffect演示与内部状态使用(现场演示):

    import React from "react";
    import { useAsyncEffect } from "use-async-effect2";
    import cpAxios from "cp-axios";
    
    function TestComponent({ url, timeout }) {
      const [cancel, done, result, err] = useAsyncEffect(
        function* () {
          return (yield cpAxios(url).timeout(timeout)).data;
        },
        { states: true, deps: [url] }
      );
    
      return (
        <div>
          {done ? (err ? err.toString() : JSON.stringify(result)) : "loading..."}
          <button onClick={cancel} disabled={done}>
            Cancel async effect (abort request)
          </button>
        </div>
      );
    }

使用装饰器的类组件(现场演示)

import React, { Component } from "react";
import { ReactComponent } from "c-promise2";
import cpAxios from "cp-axios";

@ReactComponent
class TestComponent extends Component {
  state = {
    text: ""
  };

  *componentDidMount(scope) {
    const { url, timeout } = this.props;
    const response = yield cpAxios(url).timeout(timeout);
    this.setState({ text: JSON.stringify(response.data, null, 2) });
  }

  render() {
    return (<div>{this.state.text}</div>);
  }
}

export default TestComponent;

更多其他例子:

Axios请求的错误处理 用坐标获取天气 Live搜索 暂停和继续 进步捕获