描述bug
useParameter
API在初始加载时无法正常工作。
我正在实现和管理一个storybook-addon-cookie
。
我的插件使用useParameter
来读取用户在故事中输入的cookie值,并在面板中显示它们。
然而,自从迁移到storybook版本8后,当我通过useParameter
访问参数时,我在初始加载时得到一个空值。
当我使用console.log
到preview
和Panel
时,它似乎在调用preview
之前一直得到一个空值。
有没有办法确保在调用manager.js
之前调用preview.js
?
// Panel
export const PanelContent: React.FC = () => {
const { path } = useStorybookState();
const defaultCookie = useParameter<Cookie>(PARAM_KEY, {}); // TODO: Doesn't work on initial load
const [story, setStory] = useState<string>();
const [value, setValue] = useState<Cookie>();
const [globals, updateGlobals] = useGlobals();
const initCookie = () => {
setStory(path);
setValue(defaultCookie);
clearCookies();
setCookies(defaultCookie, encoding);
};
useEffect(() => {
console.log('defaultCookie', defaultCookie);
if (story !== path) {
initCookie();
}
}, [defaultCookie, path, story]);
//...
}
// preview
export const cookieDecorator = (
storyFn: StoryFunction<Renderer>,
{ parameters }: DecoratorContext,
) => {
const [flag, setFlag] = useState<boolean>(true);
if (flag) {
setFlag(false);
if (!parameters) return storyFn();
if (parameters[PARAM_PRESERVE_KEY] !== true) {
clearCookies();
}
if (parameters[PARAM_KEY]) {
console.log(parameters[PARAM_KEY]);
setCookies(parameters.cookie, parameters.cookieEncoding);
}
}
return storyFn();
};
复现链接
https://github.com/hwookim/storybook-addon-cookie
复现步骤
- 无响应*
系统
该包基本上遵循了addon-kit中的设置。
其他上下文
- 无响应*
3条答案
按热度按时间xdyibdwo1#
@ndelangen 有任何想法吗?
wz3gfoph2#
是否有办法确保在调用
manager.js
之前先调用preview.js
?很遗憾,没有。
这是因为参数是动态的,故事是异步加载的;只有在故事加载完成后,管理器才能知道关于某个故事的参数。
ego6inou3#
@ndelangen 是否有API可以判断参数是否已加载?
很难通过值的存在或缺失来判断,因为用户可以发送一个空值。