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

Posted 2023-03-07

【中文标题】数据对象未在 Svelte 组件中呈现

【英文标题】：data object not rendering in svelte component

【发布时间】：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<...>> 对象。

【参考方案1】：

您的代码缺少结束 /await。另外，在:then datadata 中调用变量会让人困惑，它与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>