React中setState更新数组后页面未重新渲染的问题求助

问题根源在于你使用了Array.sort()方法——这个方法是原地修改数组的，也就是说你直接对原始的students数组进行排序，导致shuffle变量和students指向的是同一个数组引用。React判断状态是否需要更新时用的是浅比较，因为数组引用没变化，所以它会认为状态没有更新，自然不会触发页面重新渲染。

修复步骤 #

1. 先创建原始数组的副本，再对副本进行排序，确保每次传递给setRandom的是一个新的数组引用。
2. （可选）优化洗牌算法，提升随机性（原算法的随机性不够均匀）。

修正后的代码 #

基础修复版

const Home: NextPage = () => {
  const [random, setRandom] = useState(students);

  function randomize() {
    // 用扩展运算符复制原数组，避免修改原始数据
    const shuffled = [...students].sort(() => 0.5 - Math.random());
    setRandom(shuffled);
  }

  return (
    <>
      <main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4">
        <h1 className="text-6xl font-bold">This week&apos;s seat</h1>

        <button onClick={randomize}>Shuffle</button>

        <div className="seatbox">
          {random.map((student) => (
            <Seat key={student}>{student}</Seat>
          ))}
        </div>
      </main>
    </>
  );
};

优化洗牌算法版（Fisher-Yates，更公平的随机打乱）

const Home: NextPage = () => {
  const [random, setRandom] = useState(students);

  function randomize() {
    const shuffled = [...students];
    // Fisher-Yates 洗牌算法
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      // 交换元素位置
      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    setRandom(shuffled);
  }

  return (
    <>
      <main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4">
        <h1 className="text-6xl font-bold">This week&apos;s seat</h1>

        <button onClick={randomize}>Shuffle</button>

        <div className="seatbox">
          {random.map((student) => (
            <Seat key={student}>{student}</Seat>
          ))}
        </div>
      </main>
    </>
  );
};

关键说明 #

• 使用[...students]或者students.slice()创建原数组的浅拷贝，这样每次生成的shuffled都是新的数组，React能检测到状态变化并触发重新渲染。
• 因为你的students数组元素是字符串（基本类型），浅拷贝就足够；如果数组元素是复杂对象，才需要考虑深拷贝。

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