Question

在以下组件（称为“注释屏幕”）中，组件 DocPicker 让用户设置变量 selectedDoc，该变量又应该更新两个组件：Form 和SearchResultView。

<script lang="ts">
  import type { AppScreen, QuestionGouv } from '../../types.js';
  import Screen from '../../Screen.svelte';
  import DocPicker from './DocPicker/DocPicker.svelte';
  import SearchResultView from '../../SearchResultView.svelte';
  import Form from './Form.svelte';

  export let screen: AppScreen;
  
  let selectedDoc: QuestionGouv;
  let isPickerOpen: boolean;
</script>

<Screen bind:screen>
  <svelte:fragment slot="sidebar">
    <DocPicker bind:picked={selectedDoc} bind:isOpen={isPickerOpen}/>
    {#if selectedDoc}
      <Form doc={selectedDoc}/>
    {/if}
  </svelte:fragment>
  <svelte:fragment slot="content">
    {#if selectedDoc}
      <SearchResultView doc={selectedDoc} on:close={() => {selectedDoc = undefined}}/>
    {/if}
  </svelte:fragment>
</Screen>

问题是 Form 组件在 selectedDoc 更改时不会更新。第一次 selectedDoc 从 undefined 变为某个值时，组件 Form 会以正确的值出现，但如果稍后 selectedDoc 发生变化（因为用户使用了 DocPicker )，组件 Form 保持先前的值。

SearchResultView 每次都会更新，就像一个魅力，所以我认为问题来自 Form 组件，但是如果我将行 <Form doc={selectedDoc}/> 复制到SearchResultView 是（即在 <svelte:fragment slot="content"> 中），Form 的这个实例可以正常工作！同样，如果我在 SearchResultView 中放入另一个 <svelte:fragment slot="sidebar"> 实例，SearchResultView 的这个实例不会更新。

所以这似乎与组件插入的where有关，即Screen组件的哪个插槽。但是 Screen 组件非常简单，归结为：

<Sidebar>
  <div class="screen-sidebar">
    <slot name="sidebar"></slot>
  </div>
</Sidebar>
<slot name="content"></slot>

Sidebar 组件也很简单：

<div class="sidebar">
  <slot></slot>
</div>

Answer 1

好的，知道了。事实证明，问题的原因并不在我提出的问题中的代码片段中。我在 Svelte 的 DocPicker 组件中做了一些您可能根本不应该做的事情。 Svelte 编译器没有抱怨，但显然真的很困惑，这导致了我在问题中描述的奇怪行为。

这里是问题的详细信息以及我是如何发现它的。

我试图想出一个最小的工作示例，以便我可以将它放在 Svelte REPL 中，当然问题不是重现。

所以我尝试了许多中间步骤，从我的问题情况到失败的最小工作示例，看看哪个精确步骤会带回错误。将它带回来的是 bind:isOpen={isPickerOpen} 组件中的 DocPicker 道具绑定。所以问题很可能与这个组件有关。

我查看了这个 DocPicker 组件的代码，prop isOpen 的使用方式很奇怪。我什至留下了关于它的评论警告：

export let isOpen: boolean = true;
$: isOpen = !Boolean(picked);
// XXX is it good practice to "force" a variable that is also reactively assigned?
function openPicker() {
  isOpen = true;
}

所以我想我现在可以在评论中回答这个问题：不，这可能不是一个好主意。或者也许不是这样。如果它总是一个坏主意，那么 Svelte 编译器在看到这个时不能引发错误吗？

无论如何，我改变了 isOpen 的管理方式（不是通过响应式赋值，只通过命令式赋值），现在它就像一个魅力。

Svelte 组件在一个插槽中不会看到道具更新，但如果在另一个插槽中会

1 个答案: