javascript - 故事书 6 - 如何设置对象数组？

Question

我想为我的 Badge 组件传递数据 Prop ，我遇到了 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>;
};