React状态更新后AfterVoteProgress组件Props未同步问题

问题场景 #

导入投票池并完成投票后，进度条无法正确显示百分比。当投票池选项票数从0变为1时，组件内部状态已更新，但maxParcentage props未同步，进度条更新明显滞后。

初始数据格式 #

[
  {id: 44, question_text: 'Here', votes: 0, maxParcentage: 0},
  {id: 45, question_text: 'There', votes: 0, maxParcentage: 0},
  {id: 46, question_text: 'Nowhere', votes: 0, maxParcentage: 0}
]

问题定位 #

涉及optionSelect.jsx和afterVoteProgress.jsx两个文件：

1. maxParcentage未随票数变化实时计算更新，导致props传递滞后；
2. afterVoteProgress.jsx中的useEffect仅在页面快速刷新时触发定时器，未监听maxParcentage props的变化，无法在数据更新时及时触发进度条重绘。

修复方案 #

1. 实时同步maxParcentage计算逻辑 #

在optionSelect.jsx的投票提交处理逻辑中，每次票数更新后重新计算所有选项的百分比，确保maxParcentage与票数同步：

// 投票完成后执行以下逻辑更新选项数据
const totalVotes = options.reduce((sum, opt) => sum + opt.votes, 0);
const updatedOptions = options.map(opt => ({
  ...opt,
  maxParcentage: totalVotes > 0 ? Math.round((opt.votes / totalVotes) * 100) : 0
}));
setOptions(updatedOptions);

2. 修正useEffect依赖触发逻辑 #

在afterVoteProgress.jsx中，让useEffect监听maxParcentage props的变化，一旦props更新就触发进度条状态更新：

import { useState, useEffect } from 'react';

const AfterVoteProgress = ({ maxParcentage }) => {
  const [currentPercentage, setCurrentPercentage] = useState(0);

  useEffect(() => {
    // 清除之前的定时器避免叠加
    const timer = setTimeout(() => {
      setCurrentPercentage(maxParcentage);
    }, 200); // 可根据动画需求调整延迟时间
    return () => clearTimeout(timer);
  }, [maxParcentage]); // 关键：添加maxParcentage为依赖项

  return (
    <div className="progress-bar">
      <div 
        className="progress-fill" 
        style={{ width: `${currentPercentage}%` }}
      />
      <span>{currentPercentage}%</span>
    </div>
  );
};

export default AfterVoteProgress;

3. 排查渲染阻塞问题 #

确认afterVoteProgress.jsx没有被不必要的React.memo包裹（如果使用了memo，需确保props比较逻辑能识别maxParcentage的变化）；同时检查父组件传递props时，是否存在引用类型复用导致的更新不触发问题（比如传递对象时，每次更新需返回新的对象引用）。

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