当用户点击后退按钮时，React Native 刷新内容 - 使用 Hooks

Question

我想刷新数据，当用户从一个页面返回到另一个页面时。 这就是我的 useEffect 函数现在的样子：

useEffect(() => {
setIsLoading(true);
AsyncStorage.getItem("user").then((response) => {
const currentData = JSON.parse(response);
setUser(currentData)
fetch('URL',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_id: currentData.id
}),
}
)
.then(response => response.json())
.then(data => {
setNotis(data.notifications);
setIsLoading(false)
})
.catch(error => {
});
});
}, []);

当用户在页面上时，此函数应每次运行。不管它是否在反向压制。

谢谢

Answer 1

使用 React-navigation

如果您使用的是反应导航，我们可以直接刷新屏幕

导入@react导航/本机

import React, { useEffect } from "react";
import { useIsFocused } from "@react-navigation/native";
const HomeScreen = (props) => {
const isVisible = useIsFocused();
useEffect(() => {
console.log("called when screen open and also on close"); 
// this will call on both screen open and screen close.
if (isVisible) {
console.log("called when screen open or when back on screen "); 
}
}, [isVisible]);
return (
......
)
}

我希望它会有所帮助。

Answer 2

这里真正的问题是在屏幕外部导航时没有卸载屏幕，因此钩子不会触发，因为组件已经挂载。有多种选项可以解决此问题，就像在屏幕聚焦/模糊时添加侦听器一样，或者只是观察navigation道具的变化。对于最后一种解决方法，您可以尝试如下方法：

useEffect(() => {
setIsLoading(true);
AsyncStorage.getItem("user").then((response) => {
const currentData = JSON.parse(response);
setUser(currentData)
fetch('URL',
{
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_id: currentData.id
}),
}
)
.then(response => response.json())
.then(data => {
setNotis(data.notifications);
setIsLoading(false)
})
.catch(error => {
});
});
}, [navigation]);

要监视 onFocus 事件，您可以从react-navigation导入NavigationEvents并将钩子的逻辑移动到函数refreshData

import {NavigationEvents} from 'react-navigation`
...
<NavigationEvents onWillFocus={refreshData}/>

此外，您应该在承诺稳定时将isLoading状态设置为 false，例如您可以使用

.finally(() => {
setIsLoading(false)
})