Svelte/SvelteKit渲染异常：武器伤害显示后消失问题求助

技术栈 #

Svelte/SvelteKit、Node.js、PostgreSQL

场景与异常 #

开发面向游戏玩家的交易平台，玩家登录后可发布装备/武器出售信息，访客可查看所有商品。装备显示完全正常，但武器存在以下异常：

• 提交武器出售表单后页面重载，伤害值（degats_neutre_before、degats_neutre_after）先显示随即消失
• Google Lighthouse检测发现页面存在两次渲染：第一次渲染伤害值可见，第二次渲染后消失

已排查细节 #

• 在itemCard组件中，终端console.log(item)能完整看到degats_neutre_before、degats_neutre_after字段，但浏览器控制台中无这两个字段
• 硬编码item数据时，终端与浏览器的字段仍有差异，但此时伤害值能正常显示

1. 排查服务端数据传输/序列化问题 #

终端能看到字段但浏览器看不到，核心原因大概率是服务端返回数据时过滤或未正确序列化这两个字段：

• 检查API/Server Load函数中的SQL查询，确保已选中degats_neutre_before、degats_neutre_after字段：

SELECT id, name, type, degats_neutre_before, degats_neutre_after, price FROM items WHERE type = 'weapon';

• 确认服务端返回数据时未误删字段，比如使用工具函数omit时不小心排除了伤害字段：

// 错误示例：避免此类写法
return json(omit(itemData, ['degats_neutre_before', 'degats_neutre_after']));

2. 修复SSR与客户端Hydration数据不匹配 #

两次渲染导致消失，通常是服务端渲染（SSR）时数据完整，客户端Hydration时数据缺失，引发重渲染覆盖初始内容：

• 对比服务端load函数与客户端数据获取逻辑的返回结构，确保两者完全一致。比如服务端直接查数据库，客户端调用的API需返回相同字段：

// +page.server.js 服务端加载逻辑
export async function load({ locals }) {
  const weapons = await locals.db.query('SELECT ... FROM items WHERE type = $1', ['weapon']);
  console.log('Server weapons:', weapons); // 终端可看完整字段
  return { weapons };
}

• 在客户端打印数据对比：

<script>
  import { browser } from '$app/environment';
  import { page } from '$app/stores';

  if (browser) {
    console.log('Client weapons:', $page.data.weapons); // 查看是否缺失字段
  }
</script>

3. 修正组件条件渲染逻辑 #

硬编码时显示正常，说明组件渲染逻辑本身无问题，但动态数据时可能存在条件判断疏漏：

• 确保渲染伤害值的代码仅依赖物品类型，而非字段是否存在（避免因字段为0/空字符串导致不渲染）：

{#if item.type === 'weapon'}
  <div class="weapon-damage">
    伤害范围：{item.degats_neutre_before} - {item.degats_neutre_after}
  </div>
{/if}

4. 验证数据库字段正确性 #

确认PostgreSQL中degats_neutre_before、degats_neutre_after的字段类型（如integer）与拼写完全正确，避免因字段名大小写或类型不匹配导致数据无法正常读取。

内容的提问来源于stack exchange，提问作者Alex.A