Question

做完一些阅读后，我很确定此警告是由我在组件中发出的获取请求引起的。每当我离开该组件（使用React Navigation）进行导航时，我都相信我的获取请求会导致未解决的Promise，这是由导航导致的，因此我的获取将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”中的项目。我的问题是我不知道如何“清理”或取消订阅和异步任务。我知道我的提取应该放在useEffect函数内部，因为这会产生副作用，并且我知道我应该在之后将函数返回到“清理”状态。我只是不知道那是什么意思，或者是什么样。任何帮助将不胜感激！

React Native（Hooks）-如何“取消使用useEffect清理功能中的所有订阅和取消任务”？

0 个答案: