reactjs - React Native (Hooks) - 我如何“取消 useEffect 清理功能中的所有订阅和异步任务”？

Question

在做了一些阅读之后，我很确定这个警告是由我在我的组件中发出的获取请求引起的。每当我离开所述组件时（使用 React Navigation），我相信我的 fetch 请求会导致一个未解决的 promise，这是由于导航而导致的，因此我的 fetch 返回一个未安装组件的 promise。

const MakePicker = (props) => {

    const [data, setData] = useState([{text: 'Option 1'}]);
    const [selectorState, setSelectorState] = useState([{selectedOption: null}]);

    setDataHandler = (data) => {
        setData(data);
    };

    setSelectorStateHandler = (selectedOption) => {
        setSelectorState({selectedOption: selectedOption})
    };

    useEffect(() => {
        async function fetchMakeData (makeId) {
            let response = await fetch('https://myAPIurlGoesHere', 
            {
                method: 'GET',
                headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
                }
            });
            let fetchedData = await response.json();
            return fetchedData;
        }

        fetchMakeData().then(fetchedData => {
            let data = [];
                for (const item of fetchedData.data) {
                    let dataObj = {
                        text: item.name,
                        value: item.name,
                        id: item.id
                    };
                    data.push(dataObj);
                }
                setDataHandler(data);
        })
    });

    return (
        <Layout style={styles.container}>
            <Select
            style={styles.select}
            data={data}
            placeholder='Select Make'
            selectedOption={selectorState.selectedOption}
            onSelect={setSelectorStateHandler}
            />
        </Layout> 
    )  
}

我的组件在安装后立即发出 Fetch 请求。我是故意这样做的，我希望在用户单击下拉菜单之前填充我的“MakePicker”中的项目。我的问题是我不知道如何“清理”或取消订阅和异步任务。我知道我的 fetch 应该放在 useEffect 函数内部，因为这会产生副作用，而且我知道我应该在之后将一个函数返回到“清理”。我只是不知道这意味着什么，或者它会是什么样子。任何帮助将不胜感激！！

标签： reactjsreact-native