Storybook Actions作用解析及卡片滑动重置实现咨询

嘿，作为React新手能快速上手第三方库已经很棒啦！我来帮你理清Storybook的action用法，同时实现卡片滑完洗牌重显的功能。

先搞懂Storybook的action是什么 #

你提到的action('end')其实是Storybook提供的调试工具——它的作用很简单：当对应的事件（这里是onEnd）触发时，会在Storybook的Actions面板或者浏览器控制台里记录这个事件的调用，方便你确认事件是否正常触发。它本身不会执行任何业务逻辑，只是帮你做调试用的～

实现卡片滑完洗牌重显的核心思路 #

要实现这个功能，咱们需要用React的状态来管理卡片数据（原来的data是常量，滑完就没了，没法更新），当所有卡片滑完触发onEnd时，对卡片数组进行洗牌，然后更新状态让组件重新渲染。

修改后的完整代码 #

import React, { useState } from 'react'
import Cards, { Card } from 'react-swipe-card';
import { action } from '@storybook/addon-actions';
import addons, { mockChannel } from '@storybook/addons';

addons.setChannel(mockChannel());

// 初始卡片数据
const initialData = ['Alexandre', 'Thomas', 'Lucien']

// Fisher-Yates 洗牌算法（标准的公平洗牌方式）
const shuffleArray = (array) => {
  const newArray = [...array];
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  return newArray;
}

const Wrapper = () => {
  // 用state管理卡片数据
  const [cards, setCards] = useState(initialData);

  // 卡片滑完后的回调：洗牌并更新状态
  const handleEnd = () => {
    action('end')(); // 保留Storybook的调试日志
    const shuffledCards = shuffleArray(initialData);
    setCards(shuffledCards);
  }

  return (
    <Cards onEnd={handleEnd} className='master-root'>
      {cards.map(item => (
        <Card 
          key={item} 
          onSwipeRight={action('swipe right')} 
          onSwipeLeft={action('swipe left')}
        >
          <h2>{item}</h2>
        </Card> 
      ))}
    </Cards>
  )
}

export default Wrapper;

关键修改点说明 #

1. 用useState管理卡片状态：把原来的常量data改成React状态cards，这样当我们更新cards时，组件会自动重新渲染，显示新的卡片列表。
2. 实现洗牌函数：用Fisher-Yates算法生成一个打乱顺序的新数组，保证每个元素被打乱的概率一致，是最常用的公平洗牌方法。
3. 修改onEnd回调：在handleEnd里，先保留Storybook的action('end')用来调试，然后调用洗牌函数，再用setCards更新状态，触发组件重新渲染洗牌后的卡片。
4. 修正小错误：原来的onSwipeRight和onSwipeLeft都写了action('swipe left')，我改成了对应的swipe right和swipe left，这样你在Storybook里能区分左右滑动的事件。

现在你运行Storybook，滑完所有卡片后，就会自动显示洗牌后的新卡片列表啦！

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