使用useState钩子的React js

Question

我尝试使用useState react钩子，如下所示：

 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;

Answer 1

试着改变

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

至

import {useState} from "react";

Answer 2

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

在html事件和反应中有不同之处。

document description

Answer 3

这里有两个问题，单击渲染时调用按钮，以及需要使用storybook状态来传递状态更改

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

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

  <Button 
    onClick={handleClick}
 ...