Storybook 6 - 如何设置对象数组？

Question

我想为我的 Badge 组件传递数据道具，但库中的array方法有问题addon-knobs。Data prop 是一个对象数组，我试图像这样传递它：

const data = [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
];

这给我的结果是我有 2 个字段（第一个和第二个），但是当我想更改内部的值时，它们不会在屏幕上更新。

第二次尝试：

const data = array('List of items', [
  object('First', {color: '#fa2dac', text: 'RSS'}),
  object('Second', {color: '#fa2dac', text: 'RSS'}),
]);

这给了我相同的结果，但我得到了 3 个字段而不是 2 个字段，而第三个字段具有价值 [object Object]

第三次尝试：

const data = array('List of items', [
  {color: '#fa2dac', text: 'RSS'},
  {color: '#fa2dac', text: 'RSS'},
]);

这给我只提交了 [object Object]

如何添加带有对象数组的旋钮并进行全面更新？

Answer 1

我将数据数组移动到组件中，现在它完美无缺。我唯一注意到对象数组必须通过object方法传递，现在它可以工作并刷新页面。

export const Primary = () => {
  const data = object('List of items', [
    {color: '#fa2dac', text: 'RSaS'},
    {color: '#fa2dac', text: 'RSaS'},
  ]);
  return <Badge data={data}></Badge>;
};