如何在打字稿中表示键为日期且内容为数组的对象列表？

Question

我正在绞尽脑汁用打字稿表示以下数据集：

我正在尝试如下，但我在 ReactJs 中遇到错误。

interface IDose {
  name: string;
  date: string;
}

interface IVaccine {
  [date: string]: IDose[]
}

const [data, setData] = useState<IVaccine[]>([]);

...

<IonGrid>
  <IonRow>
    {data.map((d, i) => {
      return (
        <IonCol key={i}>
          <IonButton>
            {d.date}
            <br />
            {d.name}
          </IonButton>
        </IonCol>
      );
    })}
  </IonRow>
</IonGrid>

错误：未捕获类型错误：data.map 不是函数...

谁能给我一些建议？

Answer 1

首先，为您的数组对象创建一个新对象class。

export class Object {
    name: string;
    date: string; //or Date
}

然后，创建数据结构

let objectMap : Map<string (date string), Object[]> = new Map<string, Object[];

但是...当键已经是日期时，您还需要一个额外的日期字段吗？我觉得您可以简单地使用键作为命名字段的日期。

Answer 2

我确实发现您的代码存在一些问题。

首先，data 状态似乎不是对象数组，因此如果您想遍历键并打印它们各自的 Array.map() 将不起作用值。因此，如果您希望遍历数据并打印其中的值，您可能需要使用 Object.values() 代替。也就是说，您应该将 state 的类型定义为对象（字典），而不是对象数组。

这是您应该进行的更改：

interface IDose {
  name: string;
  date: string;
}

interface IVaccine {
  [date: string]: IDose[]
}

// here
const [data, setData] = useState<IVaccine>();

...

<IonGrid>
  <IonRow>
    // and here
    {data && Object.values(data).map((d, i) => {
      return (
        <IonCol key={i}>
          <IonButton>
            {d.date}
            <br />
            {d.name}
          </IonButton>
        </IonCol>
      );
    })}
  </IonRow>
</IonGrid>

如何在打字稿中表示键为日期且内容为数组的对象列表？

How to represent in typescript a list of objects where the key is the date and the content is an array?

typescript

reactjs

ionic4