Svelte: Destructured promise result in {#await} becomes undefined during re-render

Created on 9 Oct 2020  路  10Comments  路  Source: sveltejs/svelte

Describe the bug
Values in a destructured promise result become undefined after a re-render.

<script>
    let test = 0;

    $: promise = Promise.resolve({ data: 1 });
</script>

{#await promise then { data }}
    {#if data}
        <button on:click={() => (test = 1)}>Test</button>
    {:else}data is {data}{/if}
{/await}

For some reason, having promise defined in a reactive statement was necessary here to reproduce the bug. In my project, I was calling a function in the {#await} block and passing it a store value.

Logs
N/A

To Reproduce
https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.0

Expected behavior
I would expect promise results to persist between renders.

Stacktraces
N/A

Information about your Svelte project:

  • Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
    Chrome, Firefox
  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
    Arch Linux

  • Svelte version (Please check you can reproduce the issue with the latest release!)
    3.29.0

  • Whether your project uses Webpack or Rollup
    N/A

Severity
This is annoying, but I can avoid using destructuring here to get around the problem.

Additional context
N/A

await bug

Most helpful comment

All 10 comments

@Conduitry I've added a pull request that seems to fix this bug.

I think the undefined is because data can't just be accessed since a Promise is involved.

@hdJerry I fixed it with my pull request, though. Once the promise resolves, the data should remain available.

cool, because I tried something using setTimeout and anytime I click the button the value of data continues to increase

Screenshot from 2020-10-18 00:32:16

is data suppose to increase by one?
just curious.

@hdJerry I think what you're seeing there is the return value of setTimeout, which returns an incremented timeout index to be used with clearTimeout.

How did you solve it?
I really love svelte.

@hdJerry I actually coded it live on Twitch, if you're interested in watching: https://youtu.be/_7nKfgke29U

sweet!!, I will check now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mmjmanders picture mmjmanders  路  3Comments

robnagler picture robnagler  路  3Comments

juniorsd picture juniorsd  路  3Comments

bestguy picture bestguy  路  3Comments

st-schneider picture st-schneider  路  3Comments