Svelte中XHR定时更新JSON后，each循环格式化数据的常见方案

为什么定时更新时格式化不生效？ #

Svelte的响应式依赖赋值操作或特定数组方法（如splice、push、pop）触发视图更新。如果你的updateQuotesWithinInterval是直接通过索引修改数组元素（比如quotes[i] = newQuote），Svelte无法检测到这种变化，自然不会重新调用formatNumber更新视图。

直接解决响应式触发问题 #

不需要额外生成格式化数组，先修正数组更新的方式：

• 拿到新的quotes数据后，通过重新赋值数组触发响应式：

  // 假设newQuotes是XHR获取的最新数据
  quotes = quotes.map((oldQuote, index) => {
    const newQuote = newQuotes.find(q => q.id === oldQuote.id);
    return newQuote ? newQuote : oldQuote;
  });
  

• 或者用splice替换数组元素：

  const updateIndex = quotes.findIndex(q => q.id === newQuote.id);
  if (updateIndex !== -1) {
    quotes.splice(updateIndex, 1, newQuote);
  }
  

这样修改后，{#each}循环会自动重新渲染，formatNumber也会被重新调用。

保留原始数据 + 优化格式化的通用方案 #

如果格式化逻辑复杂，不想每次渲染都重复计算，可以用Svelte的反应式声明缓存格式化结果，同时保留原始数组：

// 当quotes变化时，自动生成带格式化值的数组
$: formattedQuotes = quotes.map(quote => ({
  ...quote,
  formattedPrice: formatNumber(quote.price)
}));

然后在模板中循环formattedQuotes：

{#each formattedQuotes as quote}
  <div>{quote.formattedPrice}</div>
{/each}

这种方案完全适用于轮询或WebSocket场景：

• 轮询时，只要每次更新quotes数组的方式符合响应式规则，formattedQuotes会自动更新；
• WebSocket推送新数据时，同样通过重新赋值或splice更新quotes，反应式声明会自动触发格式化。
  原始的quotes数组始终保持未格式化状态，可直接用于客户端计算。

关键注意点 #

• 避免直接修改数组元素的属性（quotes[i].price = newPrice），这种操作Svelte无法检测。如果要修改对象属性，需要重新赋值对象：

  quotes = quotes.map(q => 
    q.id === targetId ? {...q, price: newPrice} : q
  );
  

• 反应式声明$: 会自动追踪依赖，只要quotes变化，formattedQuotes就会重新计算，无需手动触发。

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