问题描述
react更改原数据再触发action,不会触发重新渲染
原因
原因是当你更改原数据时,this.props.data已经更改,这时再触发action,当进行shouldComponentUpdate时,nextProps.data和this.props.data实际上是一样的。
解决方法
对数组进行简单拷贝,使用slice
对象对话使用object.assign
// action
export function newFile(pidPath,pathName,rows) {
return dispatch=>{
dispatch(requireData(NEWFILE,{pidPath,pathName},data=>{
if(data.code===0){
//先进行简单的拷贝
var thisRows = rows.slice();
//此时thisRows的push并不会使rows更改
thisRows.push(data.path);
dispatch(updateRows(thisRows));
}
}))
}
}
//component.jsx
shouldComponentUpdate(nextProps, nextState) {
let nextRows = fromJS(nextProps.rows),
thisRows = fromJS(this.props.rows),
nextShowOpenFileMenu = fromJS(nextProps.showOpenFileMenu),
thisShowOpenFileMenu = fromJS(this.props.showOpenFileMenu),
thisInitRows = fromJS(this.props.initRows),
nextInitRows = fromJS(nextProps.initRows);
if( !is(nextRows,thisRows) ||
!is(nextShowOpenFileMenu,thisShowOpenFileMenu)||
!is(nextInitRows,thisInitRows)){
return true;
}else{
return false;
}
}