如何解决如何从外部函数触发 useEffect?
我是 Javascript 和 React Native 的新手,我需要一些帮助来弄清楚如何从外部函数触发 useEffect。
我的应用程序正在使用 react-native-firebase 库侦听来自 Firebase Cloud Messaging (FCM) 的消息。收到后,后台处理程序将消息写入 asyncstorage,然后使用 notifee 库显示通知。
当应用程序打开时,它从异步存储中检索消息并使用 FlatList 呈现它们。这在首次打开应用程序并呈现列表时非常有效。
问题在于,如果应用在前台时收到消息,处理程序会正确处理传入的消息并显示通知,但无法触发已呈现的消息列表的刷新。
>如何从foregroundMessageHandler 触发useEffect 的刷新/重新运行?
这是我用来在应用程序处于前台时捕获 FCM 消息的异步函数:
index.js
const foregroundMessageHandler = messaging().onMessage(async remoteMessage => {
await _handleNewMessage(remoteMessage); // Inserts FCM message into asyncstorage
await onDisplayNotification(remoteMessage); // Displays notification
// ...how to trigger a refresh of the useEffect from here??
});
这就是我在 UI 中呈现来自 asyncstorage 的消息的方式:
app.js
function HomeScreen() {
const [isLoading,setLoading] = useState(true);
const [data,setData] = useState(false);
useEffect(() => {
// Function to retrieve historical messages from AsyncStorage
async function _retrieveData() {
try {
const value = await AsyncStorage.getItem('messages');
if (value !== null) {
const oldMessages = JSON.parse(value);
setData(oldMessages);
setLoading(false);
} else {
setData(false);
setLoading(false);
}
} catch (error) {}
}
_retrieveData(); // Retrieve old messages from asyncstorage
},[]);
function renderMessagesFlatList(data) {
if (isLoading) {
return (
<ActivityIndicator />
);
} else if (data) {
return (
<FlatList
data={data}
keyExtractor={(item,index) => item.id}
renderItem={({ item }) => (
<>
<View style={{ flexDirection: 'row',flex: 1 }}>
<Image
style={{ width: 40,height: 40 }}
source={{uri:item.icon}}
/>
<View style={{ flex: 1,paddingLeft: 5 }}>
<Text style={{ color: '#000000',fontWeight: 'bold' }}>{item.sender}</Text>
<Text>{timeSince(item.time)} ago</Text>
</View>
</View>
<Text style={{ paddingTop: 4 }}>{item.body}</Text>
<Divider style={{ backgroundColor: '#e7e5e5',height: 2,marginTop: 5,marginBottom: 5 }} />
</>
)}
/>
);
} else {
return (
<Text>No notifications to display</Text>
);
};
};
更新: 使用下面的代码,我设法在收到消息时刷新 FlatList 组件。但似乎每次 useEffect 触发它都会创建另一个前台侦听器,从而导致后续消息的重复通知。我需要弄清楚如何阻止这些重复的前台侦听器被创建。
function HomeScreen() {
const [data,setData] = useState([]);
const [refreshPage,setRefreshPage] = useState(false);
useEffect(async () => {
const value = await AsyncStorage.getItem('messages35');
// ...functions to retrieve and sort historical messages into array "sortedInput"
setData(sortedInput); // setState to provide initial data for FlatList component
};
const unsubscribeOnMessage = messaging().onMessage(async remoteMessage => {
// Function to process new message and insert into local storage
await _handleNewMessage(remoteMessage);
// Display notification to user
onDisplayNotification(remoteMessage);
// Trigger refresh of FlatList component with setState
setRefreshPage(Math.random() * 100);
});
return () => {
unsubscribeOnMessage();
};
},[refreshPage]);
解决方法
您的问题有多种解决方案,但我更希望采用以下解决方法。
您可以向您的 messaging().onMessage
组件添加另一个 HomeScreen
侦听器,每当收到新消息时,您只需再次检索数据即可刷新列表:
import messaging from '@react-native-firebase/messaging';
function HomeScreen() {
// ...
useEffect(() => {
// Function to retrieve historical messages from AsyncStorage
async function _retrieveData() {
try {
const value = await AsyncStorage.getItem('messages');
if (value !== null) {
const oldMessages = JSON.parse(value);
setData(oldMessages);
setLoading(false);
} else {
setData(false);
setLoading(false);
}
} catch (error) {}
}
_retrieveData(); // Retrieve old messages from asyncstorage
// Foreground push notifications listener
const unsubscribeOnMessage = messaging().onMessage(() => {
// Whenever a new push notification is received,call the _retrieveData function again
_retrieveData();
});
return () => {
unsubscribeOnMessage();
};
},[]);
// ...
}
更新
- 您可以将
foregroundMessageHandler
放在HomeScreen
组件(您的初始代码)之外。拥有多个messaging.onMessage
侦听器是有效的。 - 您可以在
const [refreshPage,setRefreshPage] = useState(false);
组件的setData
侦听器中使用messaging.onMessage
,而不是使用HomeScreen
。所以解决方案可能是这样的:
index.js
const foregroundMessageHandler = messaging().onMessage(async remoteMessage => {
await _handleNewMessage(remoteMessage); // Inserts FCM message into asyncstorage
await onDisplayNotification(remoteMessage); // Displays notification
// ...how to trigger a refresh of the useEffect from here??
});
app.js
import messaging from '@react-native-firebase/messaging';
function HomeScreen() {
// ...
const [isLoading,setLoading] = useState(true);
const [data,setData] = useState(false);
useEffect(() => {
// ... Other code
const unsubscribeOnMessage = messaging().onMessage((remoteMessage) => {
// use setData to update your data for FlatList. It could be used to just append the new message to the current data
setData((data) => [...data,remoteMessage]);
});
return () => {
unsubscribeOnMessage();
};
// There shouldn't be any dependencies here
},[]);
// ...
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。