React js 使用useState Hook

Question

我正在尝试使用useState React Hook，代码如下：

 const [showMore, setShowMore] = useState(false);
    function handleClick(){
        setShowMore(true);
    }

我将心愿单项数值wishlistItemCount传递给WishlistItems组件

const wishListItemCount = showMore ? itemsCount : 3;
   const contentMessageElement =
        <WishlistItems
            itemCount={wishListItemCount}
            wishlistId={data.id}
            items={items}/>

我使用下面的按钮改变状态。

           <Button
                onClick={handleClick}
                className={classes.btnshowmore}>Show More
             </Button>

但是当我加载页面时，出现了错误。

Storybook preview hooks can only be called inside decorators and story functions.

请帮忙

我的完整组件

import React,{ useCallback } from 'react';
import { useMutation } from '@apollo/client';

import {FormattedMessage, useIntl} from 'react-intl';
import {ChevronDown, ChevronUp, MoreHorizontal} from 'react-feather';
import {useWishlist} from '@magento/peregrine/lib/talons/WishlistPage/useWishlist';

import {mergeClasses} from '@magento/venia-ui/lib/classify';
import Icon from '../Icon';
import WishlistItems from './wishlistItems';
import defaultClasses from './wishlist.css';
import {Button} from "react-bootstrap";
import {useWishlistAllItems} from "./useWishlistAllItems";
import wishlistItemOperations from "./wishlistItem.gql";
import {useCartContext} from "@magento/peregrine/lib/context/cart";
import {Link} from "../../drivers";
import {useState} from "@storybook/addons";


const Wishlist = props => {
    const {data} = props;
    const {formatMessage} = useIntl();
    const {
        items_count: itemsCount,
        items: items,
        name,
        sharing_code: sharingCode
    } = data;


    const talProps = useWishlistAllItems({
        items,
        ...wishlistItemOperations
    });
    const {
        handleAddAllItemsToCart,
        saveWishList,
        hasError,
        isLoading
    } = talProps;

    const talonProps = useWishlist();
    const {isOpen} = talonProps;
    const [showMore, setShowMore] = useState(false);
    function handleClick(){
        setShowMore(true);
    }

    const wishListItemCount = showMore ? itemsCount : 3;


    const classes = mergeClasses(defaultClasses, props.classes);
    const contentClass = isOpen ? classes.content : classes.content_hidden;
    const visibilityLabel = sharingCode
        ? formatMessage({id: 'wishlist.publicText', defaultMessage: 'Public'})
        : formatMessage({
            id: 'wishlist.privateText',
            defaultMessage: 'Private'
        });


    const contentMessageElement = itemsCount ? (
        <WishlistItems
            itemCount={wishListItemCount}
            wishlistId={data.id}
            items={items}/>
    ) : (
        <p>
            <FormattedMessage
                id={'wishlist.emptyListText'}
                defaultMessage={'There are currently no items in this list'}
            />
        </p>
    );

    return (
        <div className={classes.root}>
            <div className={classes.header}>
                <div className={classes.nameContainer}>
                    <h2 className={classes.name}>{name}</h2>
                </div>
                <div className={classes.subname}>
                    <span className={classes.visibility}>
                        {visibilityLabel}
                    </span>
                    <a className={classes.seeall}>See all</a>
                </div>
            </div>
            <div className={classes.tableheadroot}>
                <p className={classes.th1}>Product Information</p>
                <p className={classes.th2}>Put in the Basket</p>
            </div>
            <div className={contentClass}>{contentMessageElement}</div>
            <div className={classes.showmore}>
                <Button
                    onClick={handleClick}
                    className={classes.btnshowmore}>Show More</Button>
            </div>
            <div className={classes.btnsetbottom}>
                <Link to={'/share-wishlist'}>
                <Button className={classes.btnsharewishlist}>
                    Share your wish list
                </Button>
                </Link>
                <Button
                    className={classes.btnsharewishlist}
                    onClick={handleAddAllItemsToCart}>
                    Put all the goods in basket
                </Button>
                <Button
                    onclick={saveWishList}
                    className={classes.btnsharewishlist}>
                    Save your wish list
                </Button>
            </div>
        </div>
    );
};

export default Wishlist;

- Sahan Thilakarathna

---

<Button onClick={handleClick} ... <button onClick={handleClick} ... - Roy.B

@Roy.B 没有任何区别。 - Sahan Thilakarathna

在 StoryBook 中，您应该为要显示的每个组件创建一个故事，这些故事是您导入组件并配置示例以向其他人展示如何使用它的空间。请查看此文档 https://storybook.js.org/docs/react/get-started/introduction - Yoandry Collazo

@SahanThilakarathna 把这个 import {useState} from "@storybook/addons"; 改成这个 import {useAddonState} from "@storybook/addons"; 获得更多信息，请参见 https://storybook.js.org/docs/react/api/addons-api#useaddonstate - Roy.B

@Roy.B 也解决了那个问题，谢谢。 - Sahan Thilakarathna

Answer 1

尝试更改

import {useState} from "@storybook/addons";

至

import {useState} from "react";

- Ahmed Ahmed

---

我有这个问题，从那里导入它有什么理由吗？ - gxmad

我已经四处寻找答案，该死的自动填充。 - Sal Rahman

这是 VS Code 的智能感知功能，感谢您的帮助。 - pedrommuller

我需要做相反的事情才能使这个工作 :shrug: - jorisw

Answer 2

           <Button
                onClick={handleClick}
                className={classes.btnshowmore}>Show More
             </Button>

HTML事件和React有所不同。

文档描述

- Mohammad Javad Ghasemy

---

我已经更新了我的问题，这不会有任何影响。 - Sahan Thilakarathna

Answer 3

你有两个问题，一个是按钮在渲染时调用了点击事件，另一个是你需要使用storybook状态来传递状态变化。

const [showMoreWishList, setShowMoreWishList] = useAddonState(data.id, false); 
  ...

function handleClick(){ 
  setShowMore(true); 
  setShowMoreWishList(true); 
}
 ...

  <Button 
    onClick={handleClick}
 ...

- Roy.B