为何onMount中存在的Post标题与描述点击按钮后消失？

可能的核心原因 #

• 点击事件的更新逻辑覆盖属性：如果按钮点击时仅将post的id和html赋值给postToBeCreated（比如写成postToBeCreated.set({ id: post.id, html: post.html })），而非传入完整post对象，会直接导致其余属性丢失。
• post变量渲染后被修改：尽管你认为传递的post与onMount时一致，但父组件可能更新了props，或其他逻辑修改了当前组件内的post引用，导致点击时post只剩id和html属性。
• Store被其他订阅者篡改：若有其他组件或当前组件的订阅逻辑对postToBeCreated做了属性过滤（比如只保留id和html），会导致store值被意外修改。
• 引用传递引发的同步变化：onMount中直接将post引用存入store，后续若post对象被其他代码修改，store内的值会同步变化，最终只剩部分属性。

快速排查步骤 #

1. 点击事件中打印post：直接输出console.log(post)，确认此时post是否已丢失属性。如果是，问题出在post变量本身的变化。
2. 对比store更新逻辑：检查onMount和点击事件中的postToBeCreated.set()代码，看是否存在仅传递部分属性的情况。
3. 验证对象引用一致性：在onMount中保存post的引用（比如const originalPost = post），点击时打印console.log(post === originalPost)，判断post是否被重新赋值。
4. 排查所有store订阅逻辑：查找项目中所有订阅postToBeCreated的代码，确认是否存在过滤或修改属性的操作。

针对性解决方案 #

• 深拷贝存入Store：若担心post引用被修改，在onMount中用深拷贝保存完整对象：

  import { writable } from 'svelte/store';
  const postToBeCreated = writable({});
  
  onMount(() => {
    // 深拷贝避免引用关联
    const copiedPost = JSON.parse(JSON.stringify(post));
    postToBeCreated.set(copiedPost);
  });
  

• 修正点击事件的更新逻辑：确保点击时传入完整post对象，或用对象合并保留原有属性（如需增量更新）：

  // 直接设置完整对象
  const handleClick = () => {
    postToBeCreated.set(post);
  };
  
  // 增量更新（保留原有属性，合并新值）
  const handleClick = () => {
    postToBeCreated.set(prev => ({ ...prev, ...post }));
  };
  

• 锁定post变量稳定性：如果是父组件props更新导致post变化，可在组件内用$:语句保存初始值：

  let initialPost;
  $: {
    initialPost = JSON.parse(JSON.stringify(post));
  }
  

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