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;
        }
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值