reactjs React+Typescript中的双重Map

oxcyiej7  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(119)

也许我错过了一些东西,但我应该如何正确的双重Map在这种情况下?因为我有错误的seconMap:类型"{departure:}"上不存在属性"map"{代码:字符串;名称:字符串;日期时间:字符串;};目的地:{代码:字符串;名称:字符串;日期时间:字符串;};持续时间:字串;}

const [result, setResult] = useState<ConversionData[]>([]);

  type ConversionData = {
  uuid: string;
  airlinesCode: string;
  price: {
  amount: number;
  currency: string;
  };
  bounds: {
  departure: {
    code: string;
    name: string;
    dateTime: string;
  };
  destination: {
    code: string;
    name: string;
    dateTime: string;
  };
  duration: string;
   };
 };
 useEffect(() => {
   const api = async () => {
     const data = await fetch("http://localhost:3001/flights").then((res) =>
      res.json()
    );
    setResult(data);
  console.log(result);
};
 api();
}, []);

return (
 <div className="App">
   <h1>
     {result?.map((value) => {
       console.log(value)
       return (
         <div>
           <div>{value.price.amount}</div>
           {value.bounds.map((newvalue:any)=>{
             <div>{newvalue.departure.name}</div>
           })}
         </div>
       );
     })}
   </h1>
 </div>
 );

what I need to map
我在互联网上搜索了类似的内容,但我已经找到了起点,我需要到达bounds-〉deviation-〉name

ff29svar

ff29svar1#

类型ConversionData中的边界是对象。但在数据屏幕截图中,边界应该是数组。

bounds: Array<{
  departure: {
    code: string;
    name: string;
    dateTime: string;
  };
  destination: {
    code: string;
    name: string;
    dateTime: string;
  };
  duration: string;
   };
 }>;

相关问题