小编Dav*_*yre的帖子

Redux的mapStateToProps如何触发React组件更新

在我的react/redux项目中,我有一个对数组进行排序的操作:

case 'SORT_BY_NAME':  
  var newList = state.list; //.slice() 
  newList.sort(function(a,b){
    if (a.name > b.name){
      return 1;
    } else if (a.name < b.name){
      return -1;
    } else {
      return 0;
    }
  });    
  return Object.assign({}, state, { list: newList } );
Run Code Online (Sandbox Code Playgroud)
该操作根据所需的字段成功地对数组进行了排序,状态对象的形状符合我的预期,并且在我的反应组件mapStateToProps中被命中,并且在mapStateToProps中,状态值准确地反映了数组的排序状态.

初始渲染很好.但是排序操作未能导致我的组件的渲染方法再次被调用,因此UI中的数据从未出现排序.

我的项目的体系结构类似于Redux文档中的Reddit示例.但是,我也使用react-redux连接mapStateToProps.以下是我的组件设计的精简版:

class MyComponent extends React.Component{
	render(){
		<ul> 
		    {list.map(item =>
		      <li key={item.id}> 
			        {item.name}  
		      </li>
		    )}
	  	</ul>  
	}
} 

function mapStateToProps(state){  
  return {
	list: state.list;
	}
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)
Run Code Online (Sandbox Code Playgroud)
最终我意识到我的问题的简单解决方案是在使用slice()对其进行排序之前克隆列表.因此我的问题不是如何解决问题,而是为什么会出现这个问题.问题是redux的mapStateToProps没有调用render()吗?或者反应组件没有看到新的状态对象?

通过在mapStateToProps中设置断点,看起来好像正在设置/更改状态; 根据Chrome调试器中的Redux …

reactjs redux react-redux

1
推荐指数
1
解决办法
2571
查看次数

标签 统计

react-redux ×1

reactjs ×1

redux ×1