Блог

Я использовал следующее

Файл шаблона — для чтения файла json, как он есть в данном формате

 export type GList = {  hop_num: number,  hostname: string,  ip_address: string,  latitude: number,  longitude: number;  rtt: string;  };   export type IUList = {  hop_num: number,  hostname: string,  ip_address: string,  latitude: number,  longitude: number;  rtt: string;  };    export type iData = {  array_google : GList[];  array_iu : IUList[];  time : number; };    export type ResponseData = {  ids: iData;  };  

Файл Компонента

 import { ReactChild } from "react"; import { GList } from "../types"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";  interface Props {  google_list:GList[];   }  const Map_test: React.FunctionComponentlt;Propsgt; = ({  google_list }) =gt; {  return(  lt;div id="sample"gt;  lt;MapContainergt;  {google_list.map((trset) =gt; (  lt;Marker  key={trset.hop_num}  position={[trset.latitude, trset.longitude]}  gt;lt;/Markergt;  ))}  lt;/MapContainergt;  lt;/divgt;  ); };  export default Map_test;  

Файл App.tsx

 import { useEffect, useState } from "react"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import "./App.css"; import trdata from "./data/tracedata.json"; import { Line } from "react-chartjs-2"; import { Chart } from "chart.js"; import type { ResponseData, IUList, GList, iData } from "./types"; import Map_test from "./components/Map_test";  const App: React.FunctionComponent = () =gt; {  const [data, setData] = useStatelt;ResponseData | undefinedgt;(undefined);   const fetchData = async () =gt; {  const result = await fetch("http://18.223.114.82/pastfive");  const data :ResponseData = await result.json();  const id_num : number = 1;   setData(data);  console.log(data);  };   useEffect(() =gt; {  fetchData();  }, []);   // console.log(trdata[1]['google.com']);  return (  lt;div id="sample"gt;  lt;div id="heading"gt;  lt;h1gt;TraceRoute Analysislt;/h1gt;  lt;/divgt;  lt;divgt;  {data ? (  lt;gt;  lt;divgt;  {data ? (  lt;gt;  lt;Map_test  google_list={data.ids.array_google} \ error at this line  /gt;  lt;/gt;  ) : (  "Loading..."  )}  lt;/divgt;  lt;/gt;  ) : (  "Loading..."  )}  lt;/divgt;    lt;div id="myData"gt;lt;/divgt;  lt;scriptgt;lt;/scriptgt;  lt;/divgt;  ); };  export default App;  

Привет, я искал несколько ресурсов в Интернете, но я думаю, что это довольно сложный файл JSON, который я пытаюсь прочитать. Несмотря на то, что я описал правильный тип данных, он не может извлечь данные и выдает следующую ошибку.

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

Был бы очень признателен за небольшую помощь в этом.

Ошибка означает, что свойство array_google не может быть прочитано, поскольку data.ids оно не задано.

Если это возможно data.ids , чтобы быть неопределенным, то оно должно быть определено как необязательное.

 export type ResponseData = {  ids?: iData; };