react更改原数据再触发action,不会触发重新渲染

问题描述

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;
        }
    }

你可能感兴趣的:(web前端小白之路)