我正在使用 react-navigation 6 和 react-native CLI 來制作聊天應用程式。我想實作這個在每個聊天應用程式中都很常見的功能，當我們向某人發送訊息并回傳應用程式的主螢屏（其中列出了所有對話）時，可以看到發送的最后一條訊息。
就像我發送訊息并按下后退按鈕一樣，它會將我導航到我所有對話所在的主螢屏，并且它應該更新我發送訊息的對話。
我已經嘗試過 route.params，但它給出了一個警告non-serializable values found。
反應導航警告
另外，我聽說將 setState 函式傳遞給子組件是非常糟糕的做法，正如這里提到的
我還嘗試了navigation_events和 useEffect ，這讓我感到驚訝，它也不起作用。當我手動重繪 螢屏或注銷并登錄時，它會完全重繪 ，但當我從應用程式回傳時不會。
React.useEffect(() => {
navigation.addListener('focus', e => {
fetchConvos();
});
return () => {};
}, []); //also tried [navigation] instead of []
const fetchConvos = () => {
fetch('http://localhost:15000/' id '/conversations', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
})
.then(res => res.json())
.then(received => {
if (received?.response !== false) {
setConversations(received);
}
});
};
我已經檢查了id，received甚至setConversations，它們都在更新，但我的螢屏仍然呈現舊訊息。
另外，對于像這樣的簡單問題，我不想使用 Async Storage 或 redux。
如果這還不夠，我可以分享完整的代碼。
編輯 我想出了另一種更新它的方法可能有助于進一步澄清情況。
React.useEffect(() => {
navigation.addListener('focus', e => {
setConversations([]); //first setting convos to empty
fetchConvos(); //then fetching new data
});
return () => {};
}, []);
但是這種方法很慢，因為我要兩次更新對話狀態。
如果有人能在這里幫助我，我將不勝感激。
uj5u.com熱心網友回復：
通過采用最后 2 個代碼示例，我將沿著設定狀態以更改資料的路線走下去。就像，我不完全了解您的代碼結構。但我假設您在某個組件中使用 useEffect ，對嗎？在這種情況下，React Context 可能就是你要找的： How to use react hooks on react-native with react-navigation
它允許共享資訊，而無需構建像 redux 這樣的結構化存盤。您可能應該重新設計一些代碼，因為如果您遵循當前的邏輯，您將在選單中拆分對話的資料池并在“回傳”導航事件發生時加載它們，對嗎？同時，無論您身在何處，對話資料都應該共享并可供兩個組件使用。至少我會以這種方式重新考慮它以允許在整個應用程式中使用一致的資料。當然，除非你必須做一些具體的和現場的事情。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/386485.html
上一篇：基于圖示而不是文本均勻間隔