Svelte组件中修改file_prefs_keys导致输入框无法编辑

问题原因 #

1. 输入框绑定错误：{#each file_prefs_values as pref}中直接绑定循环变量pref，由于字符串是值类型，绑定的是临时副本，无法同步回原数组，导致后续响应式逻辑混乱。
2. 响应式循环触发：$: file_prefs_keys.forEach(...)同时依赖file_prefs_keys和file_prefs_values，修改file_prefs_keys时会触发file_prefs_values重新生成，进而再次触发同步逻辑，导致组件频繁重渲染，最终输入框失去编辑能力。
3. 数组响应式更新方式错误：使用push无法触发Svelte的响应式检测，直接重新赋值数组时又因上述问题导致输入框冻结。

解决方案 #

• 修正输入框绑定逻辑，通过索引绑定数组元素确保输入同步回原数组；
• 调整响应式同步逻辑，仅在file_prefs_values变化时同步到localStorage，避免不必要的触发；
• 使用扩展运算符重新赋值数组以触发响应式，同时利用现有响应式自动生成file_prefs_values。

修改后的完整代码 #

<script>
  import { input } from "../assets/utils.js";

  // 初始加载localStorage中符合条件的keys
  let file_prefs_keys = all().filter((k) => k.startsWith("extension-"));
  // 响应式生成对应values，确保与keys同步
  $: file_prefs_values = file_prefs_keys.map((k) => localStorage.getItem(k) || "");

  // 仅在values变化时同步到localStorage，避免依赖keys导致循环触发
  $: {
    file_prefs_values.forEach((val, i) => {
      const key = file_prefs_keys[i];
      if (key) localStorage.setItem(key, val);
    });
  }

  async function newPref() {
    const ext = await input("Preferences", "Enter the file extension to add");
    const newKey = `extension-${ext}`;
    
    localStorage.setItem(newKey, "");
    // 用扩展运算符重新赋值数组，触发Svelte响应式更新
    file_prefs_keys = [...file_prefs_keys, newKey];
    // values会自动通过响应式逻辑生成，无需手动添加
  }
</script>

<section>
  <div>
    {#each file_prefs_keys as pref, i}
      <span>{pref}</span>
      <br />
    {/each}
  </div>
  <div>
    {#each file_prefs_values as _, i}
      <!-- 通过索引绑定数组元素，确保输入同步回原数组 -->
      <input bind:value={file_prefs_values[i]} />
      <br />
    {/each}
  </div>
</section>
<button on:click={newPref}>+</button>

<style>
  /* 自定义样式 */
</style>

补充说明 #

• 移除了手动添加file_prefs_values元素的代码，依赖响应式逻辑自动从localStorage加载新key对应的值，保持数据一致性；
• 同步localStorage的逻辑仅依赖file_prefs_values，避免file_prefs_keys变化时重复触发，减少不必要的组件重渲染；
• 输入框通过索引绑定数组元素，确保用户输入能正确同步到file_prefs_values，进而同步到localStorage。

内容的提问来源于stack exchange，提问作者Bobson Tobson