svelte - 使用选择框的奇怪 Svelte react 行为

Question

我试图理解我在这里做错了什么。 我有一个简单的子组件，它从父组件接收对象列表，并使用它们的 name 属性作为选择框中的选项。我将所选选项存储在局部变量中。 我正在使用 $: onChange(props) 方法从外部监视 props 列表的更改，当它更改时，我想将局部变量设置为 props 数组中的第一个元素。就像这样:

<script>
    export let parameters = [];
    
    let selectedParameter;

    function onChange(_){
    selectedParameter = parameters[0];
    }

    $: onChange(parameters);
</script>

<select bind:value={selectedParameter} >
  {#each parameters as param}
    <option value={param}>{param.name}</option>
  {/each}
</select>

但是，现在选择已损坏，我无法更改选择，因为当我尝试选择另一个选项时，它会触发我的 Prop react 监听器，尽管 Prop 没有改变。 更改 select 中的选项是否会修改 props？

请帮助我了解它是如何工作的。如何防止这种行为？

这是父组件:

<script>
    import Select from "./Select.svelte"
    
        let parameters;

    let params1 = [{name: "1-1"}, {name: "1-2"}];
    let params2 = [{name: "2-1"}, {name: "2-2"}];
</script>

<button on:click={()=> parameters=params1}>load parameters 1</button>
<button on:click={()=> parameters=params2}>load parameters 2</button>

<Select {parameters} />

REPL

Answer 1

Svelte 目前似乎 invalidate too much when using bind:value on a <select> ;生成这段代码:

function select_change_handler() {
    selectedParameter = select_value(this);
    $$invalidate(1, selectedParameter);
    $$invalidate(0, parameters); // <-- this is the problem
}

有多种解决方法，其中一种是不使用绑定(bind)。但是你不能使用对象作为选项 value (除非您访问内部属性 __value )， native 选择 value始终是一个字符串。

例如

<!-- Split bind:value into input-only value and on:change -->
<select
    value={selectedParameter}
    on:change={e => selectedParameter = e.target.value}>
    {#each parameters as param}
        <option value={param.name}> <!-- Use a primitive value here -->
            {param.name}
        </option>
    {/each}
</select>

REPL