未安装的组件-React Native

Question

我必须使用函数/常量才能从API获取数据：

const [isLoadingRoom, setLoadingRoom] = useState(true);
const [isLoadingLobby, setLoadingLobby] = useState(true);
const [rooms, setRooms] = useState([]);
const [lobbies, setLobbies] = useState([]);
const getRooms = async () => {
let isMounted = true;
async function fetchData() {
const response = await fetch(link);
const json = await response.json();

// 👇️ only update state if component is mounted
if (isMounted) {
setRooms(json);
setLoadingRoom(false);
}
}

fetchData();
return () => {
isMounted = false;
}
}
const getLobbies = async () => {
let isMounted = true;
async function fetchData() {
const response = await fetch(link);
const json = await response.json();

// 👇️ only update state if component is mounted
if (isMounted) {
setLobbies(json);
setLoadingLobby(false);
}
}

fetchData();
return () => {
isMounted = false;
}
}
useEffect(() => {
const roomInterval = setInterval(() => {
getRooms();
getLobbies();
}, 5000);
return () => clearInterval(roomInterval);
}, []);

API每5秒钟获取一次数据，但过了一段时间，我得到了以下消息：

警告：无法对已卸载的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。

我尝试了不同的方法来获取带有const、函数、异步等的API，但我还是收到了这个错误消息。。有什么建议吗？

Answer 1

使用Ref而不是正常变量：

const isMountedRef = useRef(true);
useEffect(() => {
const roomInterval = setInterval(() => {
getRooms();
getLobbies();
}, 5000);
return () => {
clearInterval(roomInterval);
isMountedRef.current = false;
};
}, []);

并将检查条件更改为

if(isMountedRef.current){
// execute setState
}

希望能有所帮助。无需怀疑