React中点击按钮无法多次更新投票值问题求助

我正在开发一个投票系统，但点击按钮时投票值仅能更新一次，无法实现每次点击都更新。数据来源于data.json文件，相关代码如下：

const [vote, setVote] = useState<number>(props.score);

const voteUp = () => {
  setVote(props.score + 1);
};

const voteDown = () => {
  setVote(props.score - 1);
};

return (
  <CommentStyled key={props.id}>
    <div>
      <CommentScore>
        <VoteButtonStyled onClick={voteUp}>
          <img src={IconPlus} alt="IconPlus" />
        </VoteButtonStyled>
        {vote}
        <VoteButtonStyled onClick={voteDown}>
          <img src={IconMinus} alt="IconMinus" />
        </VoteButtonStyled>
      </CommentScore>
    </div>
</CommentStyled>

问题原因 #

投票函数里每次调用setVote时，都依赖**固定的props.score**计算新值。props.score是组件初始化时传入的初始值，不会随着内部状态vote的更新而变化，所以第一次点击后，后续点击始终基于初始值计算，导致看起来没有更新。

解决方案 #

使用setVote的函数式更新写法，基于当前最新的状态值计算新值：

const [vote, setVote] = useState<number>(props.score);

const voteUp = () => {
  setVote(prevVote => prevVote + 1);
};

const voteDown = () => {
  setVote(prevVote => prevVote - 1);
};

函数式更新会接收当前的状态值（prevVote）作为参数，返回新的状态值，这样每次点击都会基于最新的投票数进行增减，实现连续点击更新的效果。

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