如何为对象上的数组定义 typescript 接口

Question

图片

这是来自服务器的数据。

我想在 UI 上用 map 显示它。

这是我做的界面 -

export interface IHistory {
    reports: Readonly<{
        readonly id?: string,
        status?: Status,
        readonly created_at?: Date,
    }>
}[];

我正在做的 map - {props.history.,map((index, idx) => {}

错误 -

TypeError: Cannot read properties of null (reading 'map')

我究竟做错了什么？ 我只想显示报告

在此处输入图像描述

添加 -

界面 -

    export interface IHistory {
      reports: Array<{
        id?: string;
        status?: Status;
        created_at?: string;
      }>;
    };

 const [ hitoryState, setHistoryState ] = useState<IHistory | null>(null);

    useEffect(() => {
      backendAPIAxios.get('/history')
      .then((response: AxiosResponse<IHistoryResponse>) => {
        if (!response.data) {
          return alert('Failed to get history');
        }

        setHistoryState(() => response.data);
      })
      .catch((e: AxiosError) => {
        // alert(`Failed to get history with error: ${e}`);
      });
    }, [setHistoryState])

  console.log(props.history!.reports.map((hist) => <p>{hist.created_at}</p>))

这是我得到的错误 -

在此处输入图像描述

Answer 1

当报表是具有数组的字段时，您正在使 IHistory 成为报表对象的数组。 此外，如果从后端返回 created_at 可能是字符串而不是日期。

type Status = "fair" | "unfair";

interface IHistory {
  reports: Array<{
    id?: string;
    status?: Status;
    created_at?: string;
  }>;
};

const backendHistory: IHistory = {
  reports: [
    { id: "123", status: "fair", created_at: new Date().toISOString() },
    { id: "456", status: "unfair", created_at: new Date().toISOString() },
  ]
};

const result = backendHistory.reports.map(({ id }, _idx) => id);
console.log("result", result);

反应代码：

import React from "react";

type Status = "fair" | "unfair";

interface IHistory {
  reports: Array<{
    id?: string;
    status?: Status;
    created_at?: string;
  }>;
}

async function fakeFetch(): Promise<IHistory> {
  const backendHistory: IHistory = {
    reports: [
      { id: "123", status: "fair", created_at: new Date().toISOString() },
      { id: "456", status: "unfair", created_at: new Date().toISOString() }
    ]
  };

  return new Promise((resolve) =>
    setTimeout(() => resolve(backendHistory), 1000)
  );
}

export default function App() {
  const [backendHistory, setBackendHistory] = React.useState<IHistory>();

  React.useEffect(() => {
    let isAlive = true;

    (async function () {
      const result = await fakeFetch();
      if (isAlive) {
        setBackendHistory(result);
      }
    })();

    return () => {
      isAlive = false;
    };
  }, []);

  return (
    <div className="App">
      <h1>Backend History</h1>
      {backendHistory ? (
        backendHistory.reports.map((hist) => <p>{hist.id}</p>)
      ) : (
        <span>loading</span>
      )}
    </div>
  );
}