Redux中props.permissions更新后map渲染表格未刷新问题求助

我看你遇到的问题很典型——Redux状态明明已经更新了，但用map渲染的表格就是不刷新，反而用setState就能正常工作。这大概率是因为Redux状态更新时没有返回新的数组引用，导致React的浅比较机制认为props没变化，所以组件没触发重渲染。

下面给你一步步排查和解决的方法：

1. 检查Reducer的状态更新逻辑 #

React和Redux依赖不可变数据来判断状态是否变化。如果你的reducer里直接修改了原数组（比如用push、splice或者直接赋值），而不是返回一个新数组，那状态的引用不会变，组件就不会重新渲染。

错误的Reducer写法： #

// 直接修改原数组，引用不变
case FIELD_PERMISSION_LISTS:
  state.permissions = action.payload;
  return state;

// 或者直接修改原数组的内容
case FIELD_PERMISSION_LISTS:
  state.permissions.push(...action.payload);
  return state;

正确的Reducer写法： #

必须返回新的数组和新的state对象，用扩展运算符或者slice来创建新数组：

case FIELD_PERMISSION_LISTS:
  return {
    ...state, // 复制原state的其他属性
    permissions: [...action.payload] // 创建新数组，更新引用
  };

// 如果是对原数组做过滤/修改，也要返回新数组
case SOME_OTHER_ACTION:
  return {
    ...state,
    permissions: state.permissions.map(perm => 
      perm.id === action.id ? {...perm, enabled: !perm.enabled} : perm
    )
  };

2. 优化列表的Key值 #

你现在用数组索引key={i}作为列表项的key，这在数组元素增删、顺序变化时容易导致React的diff算法出错，虽然不是这次问题的直接原因，但建议换成每个permission的唯一标识（比如permission.id），这样React能更准确地识别元素变化：

{ this.props.permissions.map((permission) => (
  <tr className={'text-center'} key={permission.id}> {/* 用permission.id代替i */}
    {/* ... 其他内容 ... */}
  </tr>
)) }

3. 确认mapStateToProps的返回值 #

检查你的mapStateToProps函数，确保它返回的permissions是新的引用。比如如果对permissions做过滤/转换，一定要返回新数组（比如用filter、map，这些方法都会返回新数组），不要直接返回原数组的引用。

举个例子：

const mapStateToProps = (state) => {
  return {
    permissions: state.permission.permissions, // 如果这里的permissions是reducer返回的新数组，就没问题
    // 如果需要过滤：
    permissions: state.permission.permissions.filter(perm => perm.module_value === state.permission.module)
  };
};

4. 验证组件的props变化 #

可以在组件里加一个componentDidUpdate钩子，打印前后的props，确认permissions的引用是否变化：

componentDidUpdate(prevProps) {
  console.log('prev permissions:', prevProps.permissions);
  console.log('current permissions:', this.props.permissions);
  console.log('引用是否变化:', prevProps.permissions !== this.props.permissions);
}

如果打印出来引用没变化，那肯定是reducer的问题，按照第一步修改就行。

按照上面的步骤调整后，你的表格应该就能随Redux状态更新正常渲染了。

内容的提问来源于stack exchange，提问作者Andrew Kang