Question

我正在重构一个React应用，该应用从服务器上的json文件加载语言标签。使用Ajax调用从服务器中提取数据，该调用将更新包含所有语言标签的存储。这是一些说明问题的代码。

app.js

<script>
import { storeLang, getLangLabels } from './store'

// get labels from server
getLangLabels()

// set language labels in a reactive variable
$: LABELS = $storeLang.labels
</script>

<div>
 <h2>{LABELS.title}</h2>
</div>

这里是商店的设置方式。 Ajax调用会使用标签更新商店。

store.js

import { writeable } from 'svelte/store'

export const storeLang = writeable({})

export const getLangLabels = () => {
  return fetch('lang.json').then( data => {
  storeLang.set(data);
})
}

但是，当我运行该应用程序时，我还没有访问LABELS变量的权限，也无法在解析fetch调用时对其进行更新。这是错误消息。

Uncaught ReferenceError: Cannot access 'LABELS' before initialization

我在React中解决此问题的方法是仅在从服务器获取语言标签之后才呈现整个<App />。我还没有找到使用 Svelte 解决此问题的方法。

请告知。

解决方案

按照@tehshrike的建议，我将getLang设置为异步函数，并在App.svelte组件（这是应用程序的入口点）上使用了await块。这样，当承诺在获得语言标签后得到解决时，应用程序将进行渲染（出于说明目的，缩写为代码）。

App.svelte

<script>
import { getLang } from './lang/store.js';

let promise = getLang();
</script>

{#await promise}
  Loading language labels
{:then value}
  // we don't use the returned value because the labels are stored in 
  // the store and the subscribed components react accordingly
  <Header />
  <Sidebar />
  <Main />
{:catch}
  Error resolving promise
{/await}

Answer 1

如果您将诺言放入商店本身，而不是在将价值放入商店之前等待诺言解决，您可以使用await block并引用$storeLang.labels，而无需进行设置您组件内部的反应式声明。

如何推迟渲染，直到ajax调用完成

解决方案

1 个答案: