Reactjs 组件未接收新道具

Reactjs 组件未接收新道具,reactjs,redux,Reactjs,Redux,我正在使用react with redux,并且我在连接到存储列表的组件时遇到问题。我有一个列表,每当我单击它时,都会使用“选择”操作添加一个对象或将其从列表中删除,并且我有一个连接到状态的组件获取列表,如果列表为空、长度==1或>=1,则以不同的方式呈现。 列表开始为空,当我添加第一个对象时,操作被执行,组件重新呈现,如果我再次触发该操作,组件将不再呈现,但我可以在控制台中看到下一个状态包含所有选定元素。我错过了什么 //执行操作的组件: const mapDispatchToProps=调

我正在使用react with redux,并且我在连接到存储列表的组件时遇到问题。我有一个列表,每当我单击它时,都会使用“选择”操作添加一个对象或将其从列表中删除,并且我有一个连接到状态的组件获取列表,如果列表为空、长度==1或>=1,则以不同的方式呈现。 列表开始为空,当我添加第一个对象时,操作被执行,组件重新呈现,如果我再次触发该操作,组件将不再呈现,但我可以在控制台中看到下一个状态包含所有选定元素。我错过了什么

//执行操作的组件: const mapDispatchToProps=调度=>{ 返回{ 选择:已选择=>dispatchselectselected }; }; 类AnimatedlistComponent扩展组件{ 构造器{ 超级作物 this.state={selected:{}} } 他舔了舔{ console.logselected+d 让选定项=this.state.selected 如果此.state.selected[d.id]{ 删除所选[d.id] this.props.selected }否则{ 所选[d.id]=d this.props.selected } } 渲染{ const childElements=this.props.detectors.mapu=>{ 回来 这个.mclicku}> {u.name} ; }; 回来

Dector列表

{childElements} ; } } 导出默认connectnull、MapDispatchTopPropsAnimatedListComponent //接收道具的组件: 函数MapStateTopsState{ 返回{Selected:state.reducer.Selected} } @ConnectMapStateTops 类MiddlePanel扩展组件{ 构造器{ 超级作物; } 组件将接收道具{ console.log接收新道具 } 渲染{ console.logrender-middle const Selected=this.props.Selected; 让中间板 如果选择了Object.KeyDetector.length>1{ middlepanel=mas que uno; }如果选择了Object.KeyDetector,则为else。长度===0{ middlepanel=Ninguno }如果选择了Object.KeyDetector,则为else。长度===1{ 中间面板=uno } 回来 {middlepanel} ; } } //行动: 导出功能选择Selected{ 返回{ type:types.SELECT, 已选:已选 } }; //减速器: 还原态={ 所选:{} },action=null{ 开关动作类型{ 案例类型。选择: 返回Object.assign{},state,{Selected:action.Selected}; 违约: 返回状态; }
}; 我发现您的代码存在一些问题,我将指出: 1.在AnimatedlistComponent中,您选择了处于状态的对象,但未在渲染函数中使用,并且看起来实际上不需要它。如果省略了渲染方法的某些部分,并且正在使用状态中的选定对象,则应在对象更改后设置状态。 2.看起来您的AnimatedlistComponent组件是半受控的。您将它的数据保存在两个地方,一个是在使用redux更新其他组件时处于应用程序状态,另一个是在组件中,这不是一个好的做法。您应该将其保存在一个位置并保持同步。 3.导致您遇到问题的问题实际上是因为您保留了对原始选定对象的引用,而没有复制它。您应该执行如下操作:返回对象.assign{},state,{Selected:{…action.Selected};在你的减速机中获得不变性


如果我的回答不够有用,请随意评论。

首先,您的操作应该有一个类型和有效负载,因此,不要在操作中选择检测器,而是写有效负载:{Selected}。然后,在减速机中,尝试类似以下返回对象的操作@kuby没有解决任何问题,仍然从动作中获得正确的新状态,但没有重新渲染:缺少一些代码,在组件中添加了一些内容,看起来动作接收了一个数组,是来自道具的同一个数组吗?加法在哪里发生?数组是可变的,因此每次都需要创建一个新数组。@alvcarmona分派操作代码在哪里?@javed我刚刚从触发操作的组件添加了代码。谢谢这很有帮助,解决了我的问题。感谢您对良好实践的评论!