Блог

Вот данные с сервера.

Я хочу отобразить его с помощью карты в пользовательском интерфейсе.

Вот интерфейс, который я сделал —

 export interface IHistory {  reports: Readonlylt;{  readonly id?: string,  status?: Status,  readonly created_at?: Date,  }gt; }[];  

Карта, которую я делаю:

 {props.history!.map((index, idx) =gt; {}  

Ошибка:

Ошибка типа: Не удается прочитать свойства null (чтение «карты»)

Что я делаю не так? Я хочу отображать только отчеты.

Добавлен —

Интерфейс —

 export interface IHistory {  reports: Arraylt;{  id?: string;  status?: Status;  created_at?: string;  }gt;; };  const [ hitoryState, setHistoryState ] = useStatelt;IHistory | nullgt;(null);  useEffect(() =gt; {  backendAPIAxios.get('/history')  .then((response: AxiosResponselt;IHistoryResponsegt;) =gt; {  if (!response.data) {  return alert('Failed to get history');  }   setHistoryState(() =gt; response.data);  })  .catch((e: AxiosError) =gt; {  // alert(`Failed to get history with error: ${e}`);  }); }, [setHistoryState])  console.log(props.history!.reports.map((hist) =gt; lt;pgt;{hist.created_at}lt;/pgt;))  

Это ошибка, которую я получаю:

Вы создаете IHistory массив объектов отчетов, когда отчеты-это поле с массивом. Кроме того, created_at, скорее всего, будет строкой, а не датой, если она возвращается из бэкенда.

 type Status = "fair" | "unfair";  interface IHistory {  reports: Arraylt;{  id?: string;  status?: Status;  created_at?: string;  }gt;; };  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) =gt; id); console.log("result", result);  

Код реакции:

 import React from "react";  type Status = "fair" | "unfair";  interface IHistory {  reports: Arraylt;{  id?: string;  status?: Status;  created_at?: string;  }gt;; }  async function fakeFetch(): Promiselt;IHistorygt; {  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) =gt;  setTimeout(() =gt; resolve(backendHistory), 1000)  ); }  export default function App() {  const [backendHistory, setBackendHistory] = React.useStatelt;IHistorygt;();   React.useEffect(() =gt; {  let isAlive = true;   (async function () {  const result = await fakeFetch();  if (isAlive) {  setBackendHistory(result);  }  })();   return () =gt; {  isAlive = false;  };  }, []);   return (  lt;div className="App"gt;  lt;h1gt;Backend Historylt;/h1gt;  {backendHistory ? (  backendHistory.reports.map((hist) =gt; lt;pgt;{hist.id}lt;/pgt;)  ) : (  lt;spangt;loadinglt;/spangt;  )}  lt;/divgt;  ); }