React状态数组移除首元素后未更新：此写法为何失效？

嘿，这个问题我太熟悉了！你之所以看不到state更新，核心问题在于直接修改了React state的原引用，React根本没检测到状态发生变化。

原因分析 #

看你的代码：

drawCard = () => { 
  const deck = this.state.cards; 
  deck.shift(); 
  console.log(deck, 'deck'); 
  this.setState({cards: deck}) 
}

这里const deck = this.state.cards并没有创建新数组，只是把state里cards数组的引用赋值给了deck变量。所以你调用deck.shift()的时候，其实是直接修改了this.state.cards本身——这完全违背了React的「状态不可变」原则。

React判断状态是否需要更新，是通过比较前后state的引用是否改变来实现的。你最后setState传入的deck和原来的this.state.cards是同一个引用，React会觉得“哦，这个状态没变”，自然不会触发组件重新渲染，所以你看到的state.cards.length始终是初始的3。

修复方案 #

解决思路就是：永远不要直接修改原state，而是创建一个新的数组/对象，再用这个新值去更新state。这里给你两种常用的写法：

方法1：先创建原数组的副本再修改

用扩展运算符或者slice()、Array.from()来复制原数组，修改副本后再更新状态：

drawCard = () => { 
  // 用扩展运算符创建新数组副本
  const deck = [...this.state.cards]; 
  deck.shift(); 
  this.setState({cards: deck}) 
}

方法2：使用函数式更新（更推荐）

当你的新状态依赖于旧状态时，React推荐用函数式的setState，它能确保你拿到的是最新的state值：

drawCard = () => { 
  this.setState(prevState => ({
    // slice(1)会返回一个去掉第一个元素的新数组
    cards: prevState.cards.slice(1)
  }));
}

这种写法更简洁，也避免了因为state异步更新可能带来的问题。

这样修改后，你就能看到state.cards.length正确变化，组件也会重新渲染啦！

内容的提问来源于stack exchange，提问作者The Walrus