Storybook同名属性值留存Bug求助及自动文档关闭咨询

1. 解决控件值残留问题 #

这个问题是Storybook默认会保留控件的临时输入值，跨组件切换时如果有同名属性就会出现残留，但组件实际渲染用的是当前story的args，所以会出现显示不一致。解决方法：

• 全局配置：在.storybook/preview.js中添加全局控件配置，禁用持久化：

  export const parameters = {
    controls: {
      persistent: false,
    },
  };
  

• 单个组件配置：如果只想针对特定组件处理，在组件的argTypes里设置：

  Story.argTypes = {
    list: {
      description: "List of items",
      table: {
        type: { summary: "Array" },
      },
      persistent: false, // 单个属性禁用持久化
    },
  };
  

2. 修复控件显示"set object"/"set string"异常 #

这种情况通常是Storybook自动推断控件类型失败导致的，手动指定控件类型即可：
修改你的示例代码中的argTypes，明确指定控件类型：

Story.argTypes = {
  list: {
    description: "List of items",
    table: {
      type: { summary: "Array" },
    },
    control: { type: "object" }, // 强制使用对象/数组控件
  },
};

另外检查组件的TypeScript类型定义，确保属性的类型是明确的（避免用any），这样Storybook自动推断时更准确。

3. 关闭自动生成文档功能 #

如果确实怀疑自动生成文档导致问题，可以按以下方式关闭：

• 单个组件关闭：在组件的meta配置中添加：

  const meta: Meta = {
    title: "Components/Component",
    component: Component,
    parameters: {
      docs: { disable: true }, // 关闭当前组件的自动文档
    },
  };
  

• 全局关闭：在.storybook/preview.js中添加全局参数：

  export const parameters = {
    docs: { disable: true }, // 全局禁用自动文档生成
  };
  

补充说明 #

如果上述方法无效，还可以尝试：

• 清除Storybook的缓存，重启服务（npm run storybook -- --no-manager-cache）
• 升级Storybook到最新稳定版本，这类控件状态的bug在新版本中通常会被修复

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