皈依舞
2022-09-02 17:20:39
對原始帖子的更新:我意識到問題在于Redux狀態下的更新(WaitingRoom組件的道具)以某種方式將組件的整個狀態設置為其初始狀態。因此,“showmatchingwindow”也被設置為false。最初,在調度MATCHING_REQUEST并將“加載”設置為 true 后,WaitingRoom 組件的狀態仍保持不變。但是,在調度MATCHING_SUCCESS并且“加載”變為假并且更新了Redux狀態中的“buddy”和“chatid”之后,WaitingRoom狀態中的所有字段都以某種方式重置為其初始值。這很奇怪,在我的其他 Redux 操作中沒有發生。我想知道是否有人可以幫助我解釋導致這種情況的原因。非常感謝您的耐心和您可以提供的任何幫助!鏈接到Github存儲庫:https://github.com/liu550/salon_project(WaitingRoom組件位于src/components/waitingroom中.js以下是原始帖子///我正在為我的網站構建一個隨機匹配功能。以下是簡要說明:我希望在成功匹配2個用戶后彈出一個聊天窗口。在我的 Redux 狀態中,我有 (1) “加載”,(2) “buddy”表示與當前用戶匹配的用戶 ID,以及 (3) “chatid”表示存儲 2 個用戶之間聊天歷史記錄的 firestore 文檔的 ID。startMatching Redux 操作在 WaitingRoom 組件中調用,該組件是一個網頁,除了具有匹配按鈕外,還顯示其他用戶的配置文件。聊天窗口是MingingWindow組件,它需要一個聊天id作為其道具來呈現2個用戶之間的相應聊天記錄。我確信我的 Redux 操作工作正常,但在將更新的 Redux 狀態傳遞給我的 React 組件時遇到了問題。以下是我嘗試過的2種方法:方法 1:在 WaitingRoom 組件返回的模式內顯示聊天窗口。如您所見,我在這里所做的只是條件渲染。但是,通過這種方法,模式以某種方式迅速出現不到一秒鐘,然后與用戶選擇其性別偏好的先前模式一起消失。檢查Waitroom組件的道具,我發現“buddy”和“chatid”確實更新了。難道不應該渲染MingWindow嗎?我也嘗試過只把成功>而不是MingingWindow組件,結果是一樣的。方法1(等候室)class WaitingRoom extends Component { state = { ...... } showMatching = (e) => { e.preventDefault(); this.setState({ showmatching: true }) } handleMatching = (e) => { e.preventDefault(); this.props.startMatching(this.props.auth.uid, this.props.profile, this.props.profile.gender, this.state.genderpreference); this.setState({ showmatchingwindow: true }) } closeMatching = () => { this.setState({ showmatching: false }) }
2 回答

月關寶盒
TA貢獻1772條經驗 獲得超5個贊
首先,我認為你不需要在這里使用任何內部狀態。如果您知道多個組件必須共享相同的變量,并且它們不是分層的,則只需使用存儲并使用應用程序狀態即可。
其次,我認為在你的化簡器中,你可能會指向相同的初始狀態并直接改變它(違反redux規則)。簡而言之,由于淺復制,您的狀態可能指向相同的舊初始狀態對象,因此您的 react 組件未檢測到更改。
在返回新狀態之前,請嘗試在 redux reducer 中創建初始狀態的深層副本(而不是淺副本)。這些鏈接討論了這些概念:
最后,初始狀態下的好友不應該是空數組而不是字符串嗎?

忽然笑
TA貢獻1806條經驗 獲得超5個贊
您似乎正在使用函數來返回組件:
// main.js
const WaitingRoomPage = () => {
return <WaitingRoom />;
};
...
<Route path='/waitingroom' component={WaitingRoomPage} />
我不認為你應該這樣做,因為每次重新渲染Main都會導致你繼續重新安裝(從而重新初始化)。你的不是一個功能組件,即使它是,你仍然應該使用更簡單的方式來聲明帶有屬性的:WaitingRoomWaitingRoomRoutecomponent
<Route path='/waitingroom' component={WaitingRoom} />
添加回答
舉報
0/150
提交
取消