SvelteKit组件分页时过滤对象不更新问题排查

问题根源 #

1. 分页时投票状态不更新：最初未用响应式声明voted和lastVote，父组件传递的vote prop随分页切换变化时，子组件不会重新计算这两个变量，导致展示旧状态。
2. 投票后本地更新失效：改为$: voteAvg = actor.voteAvg和$: voteTotal = actor.voteTotal后，虽解决了分页重置问题，但投票时未正确维护本地状态（如lastVote未同步更新），且依赖actor属性的响应式逻辑可能干扰手动更新的结果。

修复方案 #

1. 优化Person.svelte组件状态管理

保留分页时的响应式自动更新逻辑，同时确保投票后的本地状态修改生效：

export let actor;
export let vote;

// 分页切换时，自动根据新的vote更新基础状态
$: voted = vote.length > 0;
$: lastVote = vote.length > 0 ? vote[0].vote : false;

// 初始化时从actor取初始值，分页切换新演员时自动重置
$: voteAvg = actor.voteAvg;
$: voteTotal = actor.voteTotal;

const captureVote = async (e) => {
    const newVote = parseInt(e.target.value);
    // 保存投票前的lastVote，用于后端请求的一致性校验
    const originalLastVote = lastVote;

    // 即时更新本地状态，让UI立刻反馈
    if (voted) {
        // 已有投票：更新平均值
        voteAvg = voteAvg - originalLastVote + newVote;
    } else {
        // 首次投票：更新平均值和总票数
        voteAvg = (voteAvg * voteTotal + newVote) / (voteTotal + 1);
        voteTotal += 1;
        voted = true;
    }
    // 更新lastVote为当前投票值，保证后续计算正确
    lastVote = newVote;

    // 发送请求到后端
    await fetch('/vote', {
        method: 'POST',
        body: JSON.stringify({ 
            type: 'actor',
            actorId: actor.id, 
            vote: newVote,
            lastVote: originalLastVote,
            voted: voted
        }),
        headers: {
            'Content-Type': 'application/json'
        }
    });
};

2. 父组件（+page.svelte）性能优化

避免在#each循环内重复执行filter，提前构建投票映射表提升效率：

<script>
    // 假设data.actors和votes已通过load函数获取
    $: actorVoteMap = new Map(
        votes
            .filter(v => v.type === 'actor')
            .map(v => [v.typeId, v])
    );
</script>

{#each data.actors as actor}
    <Person 
        actor={actor} 
        vote={actorVoteMap.get(actor.id) || []} 
        hasSession={!!data.session}
    />
{/each}

核心要点 #

• 响应式声明$:仅用于需要随父组件props变化自动更新的状态（如分页时的基础投票状态、新演员的初始统计值）。
• 投票后的本地状态需手动更新，确保UI即时反馈，同时避免与响应式逻辑冲突。
• 后端请求需使用投票前的原始lastVote，保证前后端数据一致性。

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