useState更新后数组映射的用户排名位置未局部重渲染问题

问题原因 #

1. 数据追加而非替换，导致数组冗余
   逻辑文件中更新用户排名列表时，使用[...prevData, ...scoreData]将新数据追加到旧数组末尾，而非直接替换整个数组。这会导致数组中累积历史数据，用户的索引位置计算基于包含旧数据的数组，自然无法得到正确排名，只有页面刷新清空旧数据后才会显示正常。

2. 冗余状态引发更新延迟
   主文件中额外维护了updatedList状态，通过useEffect同步usersScoreList的变化。这种多一层状态的设计会导致updatedList的更新滞后于usersScoreList，进而让基于updatedList计算的currentPosition无法及时同步最新数据。

解决方法 #

1. 修正数据更新逻辑，直接替换数组 #

在逻辑文件的fetchUsersScore函数中，将setUsersScoreList的更新方式从追加改为直接替换：

const fetchUsersScore = async () => {
  setIdle(false)
  try {
    const { data, error } = await getUsersRank({
      page: 1,
      limit: 0,
      sort: usersSort,
    })
    if (error) throw error
    const scoreData = data?.data
    const HighestScore = Math.max(...scoreData.map((user) => user.score))
    // 直接替换为最新的完整排名列表，而非追加
    setUsersScoreList(scoreData)
    setLiderScore(HighestScore)
  } catch (err) {
    console.error(err)
  }
}

2. 移除冗余状态，直接使用原始列表计算排名 #

主文件中删除updatedList相关的状态和useEffect，直接基于usersScoreList计算当前排名：

const { usersScoreList, liderScore } = useScoreLogic()
const { user } = useAuth()
const { id } = user || {}

// 直接用usersScoreList计算排名，优化为一次遍历的findIndex
const currentPosition = usersScoreList.findIndex(user => user._id === id) + 1

<ScoreBoard
  id={id}
  score={user?.score}
  updatedList={usersScoreList}
  currentPosition={currentPosition}
  liderScore={liderScore}
/>

3. 可选：优化组件渲染逻辑（ScoreBoard） #

ScoreBoard组件中不需要遍历整个updatedList来找到当前用户，直接使用传入的props即可，减少不必要的遍历：

const ScoreBoard = ({
  id,
  liderScore,
  score,
  currentPosition,
}) => {
  const { t } = useTranslation()
  return (
    <ScoreWrapper>
      <div>
        <StyledTypography>
          {t('Rank Position')}: {currentPosition}
        </StyledTypography>
        <StyledTypography>
          {score} {t('points')}
        </StyledTypography>
        {score === liderScore ? (
          <StyledTypography>
            {t('Congratulations, you are first!')}
          </StyledTypography>
        ) : (
          <StyledTypography>
            {t('Score behind leader')}: {liderScore - score}
          </StyledTypography>
        )}
      </div>
    </ScoreWrapper>
  )
}

效果验证 #

修改完成后，当后端返回最新排名数据时，usersScoreList会直接更新为完整的最新列表，currentPosition会基于最新数组实时计算，组件会同步渲染正确的排名位置，无需手动刷新页面。

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