react组件中显示redux状态变化的问题 [英] Problems in displaying redux state changes in react components

问题描述

更新原帖:我意识到问题在于 Redux 状态中的更新(WaitingRoom 组件的道具)以某种方式将组件的整个状态设置为其初始状态.因此，showmatchingwindow"也被设置为 false.最初，在调度 MATCHING_REQUEST 并将loading"设置为 true 后，WaitingRoom 组件的状态仍然保持不变.然而，在 MATCHING_SUCCESS 被调度并且loading"变为 false 并且 Redux 状态中的buddy"和chatid"被更新之后，WaitingRoom 状态中的所有字段都以某种方式重置为它们的初始值.这很奇怪，并且在我的其他 Redux 操作中没有发生.我想知道是否有人可以帮我解释是什么原因造成的.非常感谢您的耐心和您能提供的任何帮助！

Github 存储库链接:https://github.com/liu550/沙龙项目(WaitingRoom 组件在 src/components/waitingroom.js 中

///以下为原帖///

我正在为我的网站构建一个随机匹配功能.这里是一个简短的描述:我想要一个聊天窗口在 2 个用户成功匹配后弹出.在我的 Redux 状态中，我有(1)正在加载"，(2)伙伴"表示我们当前用户与之匹配的用户的 ID，以及(3)chatid"表示存储的 firestore 文档的 ID2 个用户之间的聊天记录.在 WaitingRoom 组件中调用 startMatching Redux 操作，该组件是一个网页，除了具有匹配按钮外，还显示其他用户的配置文件.聊天窗口是MatchingWindow组件，需要一个chatid作为props来渲染2个用户之间对应的聊天记录.

我确信我的 Redux 操作运行良好，但在将更新的 Redux 状态传递给我的 React 组件时出现问题.以下是我尝试过的两种方法:

方法 1:在 WaitingRoom 组件返回的模式中显示聊天窗口.如您所见，我在这里所做的只是条件渲染.然而，通过这种方法，模态不知何故迅速出现了不到一秒钟，然后随着用户选择他们的性别偏好的先前模态而消失.查看WaitingRoom组件的props，发现buddy"和chatid"确实更新了.不应该渲染 MatchingWindow 吗?我也试过只用 success> 而不是 MatchingWindow 组件，结果是一样的.

方法一(等候室)

class WaitingRoom 扩展组件 {状态 = {......}showMatching = (e) =>{e.preventDefault();this.setState({匹配:真实})}handleMatching = (e) =>{e.preventDefault();this.props.startMatching(this.props.auth.uid, this.props.profile, this.props.profile.gender, this.state.genderpreference);this.setState({显示匹配窗口:true})}closeMatching = () =>{this.setState({匹配:假})}使成为() {const { auth, users, profile, loading, sent, buddy, chatid } = this.props;返回 (<div><Button variant="success" onClick={this.showMatching} style={{ fontSize: "large", fontFamily: "Comic Sans MS, cursive, sans-serif"}}>随机找一个学习/工作的小伙伴瞬间!</按钮>

<Modal show={this.state.showmatching} onHide={this.closeMatching}><Modal.Header closeButton></Modal.Header><模态体><form onSubmit={this.handleMatching}>匹配我:<div className="form-inline"><div className="radio-container"><label>仅限男性</label><input type="radio" id="genderpreference" value="Male" onChange={this.handleChange} 选中={this.state.genderpreference === "Male"}/>

......

<button>开始匹配</button></表单></Modal.Body></模态><模态显示={this.state.showmatchingwindow} onHide={this.closeMatching}><Modal.Header closeButton></Modal.Header><模态体>{加载?<div class="loader"></div>: 空值}{ 哥们！== "" &&加载 === 假?<MatchingWindow chatid=chatid/>: 空值 }{ 哥们 === "" &&加载 === 假?<span>抱歉，我们目前无法帮您找到学习/工作伙伴</span>: 空值 }</Modal.Body></模态>);}}const mapStateToProps = (状态) =>{返回 {用户:state.firestore.ordered.users，身份验证:state.firebase.auth，配置文件:state.firebase.profile，加载:state.auth.loading，发送:state.auth.sent，好友:state.auth.buddy，聊天ID:state.auth.chatid}}导出默认撰写(连接(mapStateToProps，{submitTicket，startMatching，groupMessaging})，firestoreConnect([{集合:'用户'}]))(等候室);

方法 2:创建一个单独的 MatchingBox 组件，它将根据不同的状态呈现不同的元素/组件.但是，当我采用这种方法时，在 Redux 状态更改后没有触发 componentWillReceiveProps()，因为我放置在方法中的 console.log() 没有被执行.这很奇怪，因为正如我在方法 1 中提到的，当我检查 WaitingRoom 组件的 props 时，Redux 状态确实发生了变化，这意味着我的 Redux 操作和减速器代码应该没问题，并且它应该对 MatchingBox 组件工作以及.由于没有触发 componentWillReceiveProps()，我传递给 MatchingWindow 组件的 chatid 是一个空字符串，这是有问题的.我尝试了 componentDidUpdate() 但它也不起作用.

方法 2(等候室)

class WaitingRoom 扩展组件 {使成为() {返回 (......除了将第二个 Modal 替换为:{ this.state.showmatchingwindow ?<MatchingBox/>: 空值 });}}

方法 2(MatchingBox)

class MatchingBox 扩展组件 {状态 = {加载:真实，聊天:"",伙伴: []}componentDidMount() {console.log(this.props.loading);console.log(this.props.chatid);控制台日志(this.props.buddy)；this.setState({加载:this.props.loading，chatid: this.props.chatid,好友:this.props.buddy})}componentWillReceiveProps() {console.log(this.props.chatid);控制台日志(this.props.buddy)；this.setState({加载:this.props.loading，chatid: this.props.chatid,好友:this.props.buddy})}使成为() {让盒子;如果(this.props.loading === true){box = <div class="loader"></div>}别的 {如果 (this.props.buddy !== "") {框 = <div><MatchingWindow chatid={this.state.chatid}/>

}别的 {box = <span>对不起</span>}}返回 (<div>{盒子}