0

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

应用程序.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为异步函数并在组件上使用 await 块App.svelte，这是应用程序的入口点。这样，当 Promise 在获取语言标签后解决时，App 就会呈现（代码为了便于说明而缩写）。

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}
4

1 回答 1

1

如果您将 promise 放入 store 本身，而不是在将 value 放入 store 之前等待 promise 解决，您可以使用await 块和引用$storeLang.labels，而无需在组件内设置响应式声明。

于 2019-05-25T01:05:02.777 回答