为何React中setCards用扩展运算符生效，直接传值却不更新视图？

核心原因：React useState 依赖引用变化触发重渲染 #

React 的 useState 钩子判断是否需要更新组件视图的关键，是状态值的引用是否发生改变。

两种写法的差异分析 #

• setCards(shuffle(Cards)) 不生效的原因
  你的 shuffle 函数应该是在原地修改原数组（比如常见的 Fisher-Yates 洗牌算法会直接交换原数组内的元素位置），这种情况下 shuffle(Cards) 返回的还是原来的数组引用。React 对比新旧状态时发现引用没变化，就会判定状态没有更新，自然不会触发组件重渲染，页面也就不会同步变化。
  控制台能看到数组已洗牌是因为你确实修改了原数组的内容，但 React 没检测到状态引用的变更，所以视图不会更新。

• setCards([...shuffle(Cards)]) 生效的原因
  扩展运算符 [...arr] 会创建一个全新的数组副本——哪怕 shuffle 原地修改了原数组，[...shuffle(Cards)] 也会把修改后的元素复制到新数组里，新数组的引用和原数组完全不同。React 检测到状态引用变化后，就会触发组件重渲染，页面也就跟着更新了。

修复建议 #

如果想直接用 setCards(shuffle(Cards)) 生效，可以修改 shuffle 函数，让它返回新数组而非原地修改原数组：

const shuffle = (arr) => {
  // 先复制原数组，避免修改原数据
  const newArr = [...arr];
  // Fisher-Yates 洗牌算法
  for (let i = newArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArr[i], newArr[j]] = [newArr[j], newArr[i]];
  }
  return newArr;
};

这样 shuffle 返回的是新数组引用，调用 setCards(shuffle(Cards)) 时 React 能检测到状态变化，页面就会正常更新。

内容的提问来源于stack exchange，提问作者Hamdan Salih