ReactJS使用slice更新状态后视图未重新渲染问题排查

看起来你的slice用法本身是完全正确的——你通过slice()创建原数组的副本，再用concat()生成新数组来更新状态，这完全符合React无突变更新的状态管理原则。问题的根源不在slice本身，而是出在其他环节，我们一步步来拆解：

1. 核心问题：子组件未正确响应props变化 #

你的父组件Content在调用setState后状态已经更新，说明父组件本身会触发重渲染，但视图没更新，大概率是子组件MainDeck/SideDeck没有正确接收或响应props的变化：

• 如果子组件是类组件：
  • 检查是否重写了shouldComponentUpdate方法，并且错误地阻止了更新。默认的shouldComponentUpdate会做浅比较，只要props中的数组引用变化（你用slice+concat生成的是新数组，引用肯定不同）就会触发更新；但如果自定义了该方法，比如只比较数组长度、忽略引用变化，就会导致子组件不渲染。
  • 也可以直接改用React.PureComponent，它会自动帮你做浅比较，避免手动写shouldComponentUpdate出错。
• 如果子组件是函数组件：
  • 如果用了React.memo，检查是否自定义了错误的比较函数。默认的React.memo会做浅比较，新数组引用不同就会触发更新；但如果自定义了比较函数，比如错误地认为内容相同就返回true（忽略引用变化），就会阻止渲染。
• 另外，检查子组件是否把props存到了自身state里，但没有在props变化时同步更新。比如类组件没在componentDidUpdate里更新state，函数组件没写对应的useEffect监听props变化。

2. 次要排查：确认checkMovability没有意外修改原状态 #

虽然你用slice()拷贝了数组传给checkMovability，但还是要确认这个函数内部没有直接修改this.state.mainDeck或this.state.sideDeck（比如不小心用了原数组而非拷贝后的数组）。如果函数内部突变了原状态，会干扰React的更新检测逻辑，但从你的代码来看这种可能性较低。

3. 为什么用push时视图能渲染？ #

这其实是一种“错误的巧合”：当你用push直接修改原state数组（跳过slice拷贝），再调用setState，这本身违反了React状态不可变的原则——你修改的是state中的原数组，然后把同一个引用传给setState，理论上React的浅比较会认为状态没变化，不会触发渲染。但实际中，可能因为你在突变后立刻调用了setState，React强制触发了父组件的重渲染，进而带动子组件更新。这种做法不可靠，还会导致状态不一致的隐患，绝对不推荐。

解决方案 #

1. 保留你当前的slice()+concat()无突变更新方式（这是正确的做法）；
2. 修复子组件的props响应逻辑：
   • 类组件：去掉错误的shouldComponentUpdate，或改用React.PureComponent；
   • 函数组件：去掉错误的React.memo比较函数，或确保比较函数能正确识别数组变化（比如比较数组长度+每个卡片的唯一ID）；
   • 如果子组件有内部state，添加props变化时的同步逻辑（类组件用componentDidUpdate，函数组件用useEffect）。

举个类组件的错误示例及修正：

// 错误的shouldComponentUpdate（只比较长度，忽略内容/引用变化）
class MainDeck extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.mainDeck.length !== this.props.mainDeck.length;
  }
}

// 正确的做法：改用PureComponent
class MainDeck extends React.PureComponent {
  // ...渲染逻辑
}

内容的提问来源于stack exchange，提问作者Jay Nguyen