ITADN

Reactive `bind:this` for components in `{#each}` has unexpected behavior

#18145Openbdpartridge 创建于 2026-04-27
B
bdpartridgecommented
### Describe the bug Using a reactive registry/object to bind refs to components rendered in an `{#each}` doesn't always work as expected. In the specific case captured in the reproduction, Svelte sets refs for existing components in the registry to `null` after the keyed `{#each}` block updates, even though the components aren't destroyed. Hopefully the reproduction makes the exact issue clearer, because this is a little hard to describe. The reproduction is a bit contrived, but it does capture my original use case. ### Reproduction https://svelte.dev/playground/hello-world?version=5.55.5#H4sIAAAAAAAAE4VU226jMBD9lZE3D6BNoX3YFxZSVfsH0b6VSHGwSawaG9mTpBHi31e2IYFsL0-guZ45c8YdUbThJCNrTisUJw47oViGB2FBKOh-cFodethJXb2RJamF5JZkrx3BS-vSnIEsxyIvbZvYE5fobDtq-Uf2SivkCi3JSG4rI1pclapE0bTaIHQoqrceaqMbKElIKslvFzGJWuvzGJKka31OpoGqRMkR1LGxUMDCIkUevW5iX6TSyiIYffY-xo04cRa52KShbaSgWEHUCZaBWoKDn8HWdVt0qt_2cXxXZc3rSZOujwcA1F5UBfVRVSi0AsrYWp-jGDo_yJAvGBQQelOMHp5ieH6Gxxh-wlMYGL2vPdpDJFg82OiZCgRHUzSaBiCvgm2ek0reXH1Ac8WBRuz33Dgsgl3RfJe-EMq2vMJoCHTOPL3tTuVMnKCS1NqiJI7bkvidBvkEtql1X3A1EsHiPrTOHbeO5qJzDvfX3yTojR5ayNr0kIbCqdel-531dtoyWo79S8x3R0StQCs_V9GFTfSrF8YcnjwNAUP494A_KBnFTjQTaseM1d9gg9ts9_0mc6RMnFaO2PAtVW7xIrmPTDyiYV1M2FbSSwa15O-DAtzvAxOG-z1nUGl5bNSoGCn26kEgb2wGFqnBwbGnbQaPyS_Dm-m-k5HGrzp-kJunI2KyJMjfkWRojrxffvJc3A53_lzM7J88F-7CuyCXAhat0a2N4sn1B5rXvB5s_N0_HNdLGGQ-TngN__p-DlQxyf_Mc6nkBqOtt3LmXgoHaxtPaJmfih_gPxlNas9O4AqtX3X3GhrFMud7syRIhTwLxUhWU2l5_w-8NFqY6AUAAA To reproduce the problem: 1. Click "Add row" and dismiss the alert dialog. 2. Click "Trigger Row 1" to display the same alert dialog. This works because of the saved component ref. 3. Click "Add row" again and dismiss the alert dialog. 4. Click "Trigger Row 1" again. Nothing happens this time because Svelte set the component's ref to `null` in the `rowRefs` registry object. Check out the `$inspect` traces in the console to confirm. Note that making the `rowRefs` object non-reactive works around the issue, but then Svelte complains about the non-reactive binding. ### Logs ```shell ``` ### System Info ```shell System: OS: macOS 26.3.1 CPU: (12) arm64 Apple M2 Pro Memory: 891.05 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.17.1 - /Users/braedenpartridge/projects/fwd/.gradle/nodejs/node-v22.17.1-darwin-arm64/bin/node npm: 10.9.2 - /Users/braedenpartridge/projects/fwd/.gradle/nodejs/node-v22.17.1-darwin-arm64/bin/npm pnpm: 10.13.1 - /Users/braedenpartridge/projects/fwd/.gradle/pnpm/pnpm-v10.13.1/bin/pnpm Browsers: Chrome: 147.0.7727.116 Edge: 147.0.3912.86 Firefox: 148.0 Safari: 26.3.1 npmPackages: svelte: 5.55.5 => 5.55.5 ``` ### Severity annoyance
0 条评论