项目中用到了react0.14.8,用到了react-redux,也遇到了在reducer中修改值,页面补充下渲染的问题。
一、问题描述
用简单的数据来描述下问题现象,先来看下页面上props和state绑定的数据:
const mapStateToProps = (state) => { return { searchData: state.search.data } };
reducer中,原来是这么修改数据的,
case searchActionType.GETSEARCHLIST: let oData = action.data; // ... // 直接对oData进行操作 return Object.assign({},state,{ data: oData });
实际redux中的数据也是被改变了,但是页面上使用到data的地方并没有重新渲染。
二、问题处理
因为修改前后,state没有改变(数组引用),所以导致react-redux认为state没有改变,所以没有去渲染页面,所以我们可以将return这么修改:
return Object.assign({},{ data: [...oData] });
这样就可以了。