Storybook无需自定义Hook修改arg时报_useStorybookApi未定义错误

_useStorybookApi is undefined 是Storybook核心依赖版本混装导致的：

• 项目中@storybook/addon-essentials、@storybook/addon-links、@storybook/react版本为^6.4.9
• 单独安装的@storybook/api、@storybook/addons版本为^6.5.9
  6.5版本@storybook/api导出的useArgs依赖6.5版本新增的内部上下文API，6.4版本的Storybook运行时没有提供这部分上下文，跨小版本混装核心包必然触发这类上下文未定义错误。

方法一：统一依赖版本（推荐，符合官方使用规范） #

1. 对齐所有@storybook开头的依赖版本，要么全部升级到6.5.x，要么全部回退到6.4.x，以对齐6.4.9版本为例，修改package.json中对应依赖项：

"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.4.9",
"@storybook/api": "^6.4.9",
"@storybook/react": "^6.4.9",
"@storybook/addons": "^6.4.9",

2. 删除node_modules目录和对应的依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令。
3. 修改story文件的导入语句：6.4版本中useArgs不从@storybook/api导出，需要从@storybook/client-api导入：

// 替换原有useArgs的导入行
import { useArgs } from '@storybook/client-api';

调整后用第二种CSF标准写法（拆分Template、通过Template.bind({})生成story实例）即可正常运行，点击色板时会同步更新args里的selected值。

方法二：不调整依赖的兼容写法 #

如果暂时不想改动依赖版本，可以不用useArgshook，直接从story渲染函数的第二个参数拿到上下文对象，调用自带的updateArgs方法修改参数，不存在版本兼容问题：

import { ComponentMeta, ComponentStory } from '@storybook/react';
import React from 'react';

import { defaultSwatches, x1y4 } from './defaultSwatches';
import ColorPicker, { ColorPickerSwatch } from './index';

export default {
    title: 'Components/ColorPicker',
    component: ColorPicker,
    argTypes: {
        backgroundColor: { control: 'color' },
    },
} as ComponentMeta<typeof ColorPicker>;

const Template: ComponentStory<typeof ColorPicker> = ({ onClickSwatch, ...args }, context) => {
    const handlePick = (swatch: ColorPickerSwatch) => {
        onClickSwatch?.(swatch);
        context.updateArgs({ selected: swatch.id });
    };
    return <ColorPicker onClickSwatch={handlePick} {...args} />;
};

export const Primary = Template.bind({});

Primary.args = {
    swatches: defaultSwatches,
    title: 'Select a color',
    onClickSwatch: (swatch: ColorPickerSwatch) => {
        console.log(swatch);
    },
    onClickClose: () => console.log('Close it, punk!'),
    selected: x1y4.id,
};

注意：不建议用第一种直接导出带hook的Template组件的写法，Storybook 6.x的CSF规范要求story是绑定后的可渲染函数，直接导出内联组件在部分版本会出现上下文丢失问题，统一用Template.bind({})生成story实例的写法稳定性更高。

内容的提问来源于stack exchange，提问作者jdm-hexagon