英文:
Double map in React+Typescript
问题
下面是你要的代码部分的中文翻译：
也许我漏掉了什么，但在这种情况下，我应该如何正确地进行双重映射？因为我在第二个映射上遇到了错误：属性“map”在类型“{ departure: { code: string; name: string; dateTime: string; }; destination: { code: string; name: string; dateTime: string; }; duration: string; }”上不存在。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>);
需要映射的部分是在result中的bounds下的departure属性中的name。如果你需要获取这个属性，你可以在map函数中使用value.bounds.departure.name。
英文:
Maybe I'm missing something, but how should I properly double map in this case? Bcs I have error on secon map : Property 'map' does not exist on type '{ departure: { code: string; name: string; dateTime: string; }; destination: { code: string; name: string; dateTime: string; }; duration: string; }
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>);
I've searched the internet for something similar, but I've hit the starting point, and I need to get to bounds -> departure -> name
答案1
得分: 0
你的类型ConversionData中的边界是对象。但在你的数据截图中，边界应该是数组。
bounds: Array<{departure: {code: string;name: string;dateTime: string;};destination: {code: string;name: string;dateTime: string;};duration: string;};}>;
英文:
Bounds in your type ConversionData is object. But at you data screenshot bounds should be array.
bounds: Array<{departure: {code: string;name: string;dateTime: string;};destination: {code: string;name: string;dateTime: string;};duration: string;};}>;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论