question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
Conduitrycommented, Oct 22, 2020
1reaction
hdJerrycommented, Oct 20, 2020

sweet!!, I will check now.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why am i getting an undefined output when I try to access ...
I think it has to do with you mixing async and .then() . Try this way: const getUserProfileData = async () => {...
Read more >
Mutations in Apollo Client - Apollo GraphQL Docs
To execute a mutation, you first call useMutation within a React component and pass it the ... Increments a back-end counter and gets...
Read more >
Destructuring and parameter handling in ECMAScript 6 - 2ality
If the part has no match in the source, destructuring continues with the default value (if one exists) or undefined . Let's look...
Read more >
Async data made simple with React Query - Hey! I'm Tyler
I recently had the chance to chat with Tanner Linsley about react-query. A library of custom hooks that solves async data fetching and...
Read more >
A Complete Guide to Testing React Hooks - Toptal
A flowchart tracking the stale-while-refresh logic ... When the URL is changed to url2 , isLoading becomes true again and data is defaultValue...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Hashnode Post

No results found