第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在 react 組件中顯示 redux 狀態(tài)變化時(shí)出現(xiàn)的問題

在 react 組件中顯示 redux 狀態(tài)變化時(shí)出現(xiàn)的問題

皈依舞 2022-09-02 17:20:39
對(duì)原始帖子的更新:我意識(shí)到問題在于Redux狀態(tài)下的更新(WaitingRoom組件的道具)以某種方式將組件的整個(gè)狀態(tài)設(shè)置為其初始狀態(tài)。因此,“showmatchingwindow”也被設(shè)置為false。最初,在調(diào)度MATCHING_REQUEST并將“加載”設(shè)置為 true 后,WaitingRoom 組件的狀態(tài)仍保持不變。但是,在調(diào)度MATCHING_SUCCESS并且“加載”變?yōu)榧俨⑶腋铝薘edux狀態(tài)中的“buddy”和“chatid”之后,WaitingRoom狀態(tài)中的所有字段都以某種方式重置為其初始值。這很奇怪,在我的其他 Redux 操作中沒有發(fā)生。我想知道是否有人可以幫助我解釋導(dǎo)致這種情況的原因。非常感謝您的耐心和您可以提供的任何幫助!鏈接到Github存儲(chǔ)庫:https://github.com/liu550/salon_project(WaitingRoom組件位于src/components/waitingroom中.js以下是原始帖子///我正在為我的網(wǎng)站構(gòu)建一個(gè)隨機(jī)匹配功能。以下是簡要說明:我希望在成功匹配2個(gè)用戶后彈出一個(gè)聊天窗口。在我的 Redux 狀態(tài)中,我有 (1) “加載”,(2) “buddy”表示與當(dāng)前用戶匹配的用戶 ID,以及 (3) “chatid”表示存儲(chǔ) 2 個(gè)用戶之間聊天歷史記錄的 firestore 文檔的 ID。startMatching Redux 操作在 WaitingRoom 組件中調(diào)用,該組件是一個(gè)網(wǎng)頁,除了具有匹配按鈕外,還顯示其他用戶的配置文件。聊天窗口是MingingWindow組件,它需要一個(gè)聊天id作為其道具來呈現(xiàn)2個(gè)用戶之間的相應(yīng)聊天記錄。我確信我的 Redux 操作工作正常,但在將更新的 Redux 狀態(tài)傳遞給我的 React 組件時(shí)遇到了問題。以下是我嘗試過的2種方法:方法 1:在 WaitingRoom 組件返回的模式內(nèi)顯示聊天窗口。如您所見,我在這里所做的只是條件渲染。但是,通過這種方法,模式以某種方式迅速出現(xiàn)不到一秒鐘,然后與用戶選擇其性別偏好的先前模式一起消失。檢查Waitroom組件的道具,我發(fā)現(xiàn)“buddy”和“chatid”確實(shí)更新了。難道不應(yīng)該渲染MingWindow嗎?我也嘗試過只把成功>而不是MingingWindow組件,結(jié)果是一樣的。方法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 回答

?
月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

首先,我認(rèn)為你不需要在這里使用任何內(nèi)部狀態(tài)。如果您知道多個(gè)組件必須共享相同的變量,并且它們不是分層的,則只需使用存儲(chǔ)并使用應(yīng)用程序狀態(tài)即可。

其次,我認(rèn)為在你的化簡器中,你可能會(huì)指向相同的初始狀態(tài)并直接改變它(違反redux規(guī)則)。簡而言之,由于淺復(fù)制,您的狀態(tài)可能指向相同的舊初始狀態(tài)對(duì)象,因此您的 react 組件未檢測到更改。

在返回新狀態(tài)之前,請(qǐng)嘗試在 redux reducer 中創(chuàng)建初始狀態(tài)的深層副本(而不是淺副本)。這些鏈接討論了這些概念:

  1. https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

  2. 當(dāng)存儲(chǔ)狀態(tài)更改時(shí),React 組件未更新

最后,初始狀態(tài)下的好友不應(yīng)該是空數(shù)組而不是字符串嗎?


查看完整回答
反對(duì) 回復(fù) 2022-09-02
?
忽然笑

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超5個(gè)贊

您似乎正在使用函數(shù)來返回組件:


// main.js

const WaitingRoomPage = () => {

  return <WaitingRoom />;

};


...


<Route path='/waitingroom' component={WaitingRoomPage} />

我不認(rèn)為你應(yīng)該這樣做,因?yàn)槊看沃匦落秩綧ain都會(huì)導(dǎo)致你繼續(xù)重新安裝(從而重新初始化)。你的不是一個(gè)功能組件,即使它是,你仍然應(yīng)該使用更簡單的方式來聲明帶有屬性的:WaitingRoomWaitingRoomRoutecomponent


<Route path='/waitingroom' component={WaitingRoom} />


查看完整回答
反對(duì) 回復(fù) 2022-09-02
  • 2 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)