React Native - 在 fetch promise 中设置状态

Question

我有一个获取操作来将坐标接收到地图标记中。它有效，但它给出了这个错误

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at Screens/MapPage.js:71:45 in fetch.then.then$argument_0

错误行在setLocations(result.data)中。该应用程序工作正常，但我意识到此错误仅在我切换屏幕而不等待获取完成时发生。如果我不等待 setLocations 就返回主页。有没有更好的方法将状态设置为获取结果？我不明白我哪里做错了？

        fetch(baseUrl + "api/Product/GetAllProductLocalization", requestOptions)
            .then(response => response.json())
            .then((result) =>  {setLocations(result.data);} )
            .catch(error => console.log('error', error));

Answer 1

您收到此错误很可能是因为 setLocations(result.data) 之前的某些更新卸载了您在 fetch 中调用的组件。

意思是，setLocations(result.data) 正在尝试更新已卸载组件的状态，此时它会引发警告。

作为一个友好的建议，您应该查看 react-query library, as well as axios 而不是 fetch。

您可以查看他们网站上的文档

https://react-query.tanstack.com/guides/query-cancellation#using-fetch

React Native - 在 fetch promise 中设置状态

React Native - Setting state in fetch promise

fetch

promise

react-native

use-state