Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jesseskinner opened this issue Oct 9, 2020 · 10 comments · Fixed by #5531
Closed

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

jesseskinner opened this issue Oct 9, 2020 · 10 comments · Fixed by #5531
Labels

Comments

@jesseskinner
Copy link
Contributor

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

@jesseskinner
Copy link
Contributor Author

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

@hdJerry
Copy link

hdJerry commented Oct 17, 2020

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

@jesseskinner
Copy link
Contributor Author

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

@hdJerry
Copy link

hdJerry commented Oct 17, 2020

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

@hdJerry
Copy link

hdJerry commented Oct 17, 2020

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

is data suppose to increase by one?
just curious.

@jesseskinner
Copy link
Contributor Author

@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.

@hdJerry
Copy link

hdJerry commented Oct 20, 2020

How did you solve it?
I really love svelte.

@jesseskinner
Copy link
Contributor Author

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

@hdJerry
Copy link

hdJerry commented Oct 20, 2020

sweet!!, I will check now.

@Conduitry
Copy link
Member

Released you fix in 3.29.3 - https://svelte.dev/repl/3fd4e2cecfa14d629961478f1dac2445?version=3.29.3 - thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants