数据对象未在 Svelte 组件中呈现答案

【问题标题】：data object not rendering in svelte component数据对象未在 Svelte 组件中呈现
【发布时间】：2021-05-28 00:10:59
【问题描述】：

我正在尝试设置我的一个 d3 项目。我将数据导入 App.svelte，然后将其传递给 <Draw/> 组件。在 Draw.svelte 我有 export let data = [] 但是当我尝试使用数据时，它是未定义的并且是一个空数组。我究竟做错了什么？这是 App.svelte 代码。 console.log() 确实显示了我正在寻找的数据对象。

<script lang="ts">
   import Draw from "./Components/Draw.svelte"
   import { data } from './data';
   console.log(data);
</script>

<main>
   <h1>Hello </h1>
   {#await data}
       <p>Loading...</p>
   {:then data} 
       <Draw
         data={data}
       />
   {/await}
</main>

【问题讨论】：

我们能看到{ data } from ./data 中的内容吗？它应该是一个正确的Promise<Array<...>> 对象。

标签： javascript components svelte svelte-component

【解决方案1】：

您的代码缺少结束 {/await}。另外，在{:then data}data 中调用变量会让人困惑，它与promise data 同名。所以你最好调用不同的，然后使用<Draw data={myDifferentName}/>

总结一下，我会重写你的代码如下：

<script lang="ts">
   import Draw from "./Components/Draw.svelte"
   import { data } from './data';
   console.log(data);
</script>

<main>
   <h1>Hello </h1>
   {#await data}
      <p>Loading...</p>
   {:then dataValue} 
      <Draw data={dataValue}/>
   {/await}
</main>

【讨论】：

感谢您的回答！我意识到我的整个代码没有复制（包括等待）。起初我曾尝试做 data={data} ，但这没有用。所以基本上我的代码看起来像你上面的代码，除了将数据重命名为 dataValue，即使进行了更改，它也不起作用。
那么，您确定data 实际上是一个承诺吗？或者它可能是一个返回承诺的函数？
data 只是一个对象数组。我试过没有 await/then 但这也没有用。
如果数据只是一个对象数组，你绝对应该删除 await/then

【解决方案2】：

您的代码看起来正确。我猜你会承诺得到data 数组，否则使用await 没有多大意义。您还没有显示Draw 组件，很可能问题就在那里。试试这个来调试data，并确保它在promise被解析时被定义，然后将它传递给Draw：

<script lang="ts">
   import Draw from "./Components/Draw.svelte"
   import { data } from './data'
   console.log(data)
</script>

<main>
   <h1>Hello </h1>
   {#await data}
       <p>Loading...</p>
   {:then data}
       { console.log(data) }
       <Draw { data }/>
   {/await}
</main>

【讨论】：