React修改state后UI未更新：投票按钮点击后票数未实时刷新问题

该问题是React状态更新的典型场景，核心原因是你修改数组状态的方式不符合React的状态更新规则：

• React对引用类型的状态（数组、对象等）是通过引用地址浅比较判断是否需要触发组件重渲染的，只有当状态的引用地址发生变化时，才会判定状态已更新，触发重渲染刷新页面
• 你代码里的const newVotes = votes只是复制了原votes数组的引用，本质上和原状态指向的是同一个数组对象，直接修改数组元素值后调用setVotes(newVotes)，React比对后发现引用地址没有变化，会认为状态没有更新，因此跳过重渲染，页面也就不会实时刷新票数
• 切换轶事时会修改selected状态，触发组件重渲染，此时才会读取到已经修改的votes值，所以才会出现切换后才显示正确票数的情况

修改addVote函数，先拷贝原数组生成全新的数组对象，再修改数组值后更新状态即可，原代码中多余的setSelected(selected)可以直接删除：

方案1：扩展运算符拷贝数组 #

function addVote() {
  // 扩展运算符生成全新的数组对象，引用地址和原状态不同
  const newVotes = [...votes];
  newVotes[selected] += 1;
  setVotes(newVotes);
}

方案2：函数式更新（更稳妥，推荐） #

当新状态依赖旧状态的值时，使用函数式更新可以避免闭包导致的旧状态陷阱：

function addVote() {
  setVotes(prevVotes => {
    const newVotes = [...prevVotes];
    newVotes[selected] += 1;
    return newVotes;
  });
}

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