react.js - reducer更新但是view没有立即更新

问题描述

问 题

• 问题：reducer里的state确定有更新，但是view没有立即更新，如果点击页面其他按钮后view才更新

• 需求：想用react实现一个列表删除记录功能。

• 思路：列表数据存储在redux中，每条记录后面有个删除按钮，点击获取当前记录，从props中copy列表数组，删除当前记录，将数组传递到action中并触发，reducer更新state，列表view更新。

//container，点击删除执行的方法
handleDelCollection(index){
    let newcol = this.props.collections;
    newcol.splice(index,1);    
    this.props.dispatch(delCollection(newcol));//如果newcol是手动写死的数据，view会立即更新
  }

//action
export function delCollection(collections){
    console.log(collections);
    return {type:'DEL_COLLECTION', collections: collections}
}

//reducer
function collection(state=initialData,action){
  switch( action.type ){
    case 'DEL_COLLECTION':
      console.log(action.collections);  //此处能输出更新后的数据
      return Object.assign({}, state, {
        collections: action.collections
      });
    default : return state;
  }
}

解决方案

个人推测, 问题出现在这两句代码.

let newcol = this.props.collections;
newcol.splice(index,1);    

splice 是会修改原始数组的, 这样相当于直接对 state 中的数据直接修改.

React Redux 会在 shouldComponentUpdate 中对新的 props 进行浅层的判等检查，以期提升性能。如果所有的引用都是相同的，则返回 false 从而跳过此次对组件的更新。

建议用 filter 之类会返回新数组的方法改写试试

http://cn.redux.js.org/docs/f...

这篇关于react.js - reducer更新但是view没有立即更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！