我一直在使用這種方法從陣列中渲染多個自定義元素，但這是我第一次使用地圖資料結構。它編譯得很好，但什么也不渲染。我在這里設定了一個codesandbox 。
import "./styles.css";
import React from "react";
import ImageGrid from "./ImageGrid";
interface OnlineImage {
id: string;
url: string;
}
export default function App() {
const [onlineImages, setOnlineImages] = React.useState<Map<string, OnlineImage[]>>();
React.useEffect(() => {
let onlineImageMap = new Map<string, OnlineImage[]>();
// fake api call
onlineImageMap.set("randomImageSet1", [
{ id: "1", url: "https://picsum.photos/200" },
{ id: "2", url: "https://picsum.photos/200" }
]);
onlineImageMap.set("randomImageSet2", [
{ id: "1", url: "https://picsum.photos/200" },
{ id: "2", url: "https://picsum.photos/200" }
]);
// set state
setOnlineImages(onlineImageMap);
}, []);
return (
<div className="App">
<div>Below should render my custom ImageGrid for each item in map...</div>
<>
{onlineImages?.forEach((imageSet, category) => {
return (
<>
<div>Image Category: {category}</div>
<ImageGrid images={imageSet} />
</>
);
})}
</>
</div>
);
}
uj5u.com熱心網友回復：
嗨 Samuel：我認為您應該首先將地圖轉換為陣列，然后使用Array.prototype.map實際回傳原始陣列副本的方法，并將您的函式應用于它。
正如您可能已經發現，該return陳述句在函式中什么都不做forEach（更準確地說，它只會停止代碼的執行，但不會將任何內容帶回外部背景關系）。
如果你真的想使用 forEach 你將不得不使用一個陣列或物件來捕捉它然后使用 Object.entries/.map 來迭代它
const myMap = new Map(Object.entries({a: 1, b: 2}))
const myMapCaptureList = []
myMap.forEach((value, key) => {
myMapCaptureList.push([key, value])
}
// then you can use myMapCaptureList
myMapCaptureList.map(([key, value]) => <div>{key}: <span>{value}</span></div>);
但我建議使用非常有用的Array.from方法來幫助將 Map 轉換為鍵/值對條目陣列會更容易：[[key1, val1], [key2, val2]]. 它本質上等同于運行Object.entries(someObject)。
{Array.from(onlineImages || []).map(([category, imageSet]) => {
return (
<>
<div>Image Category: {category}</div>
<ImageGrid images={imageSet} />
</>
);
})}
uj5u.com熱心網友回復：
您正在使用 .forEach 方法 - 它不回傳任何內容，而是使用相同但回傳內容的 .map
{onlineImages?.map((imageSet, category) =>
<>
<div>Image Category: {category}</div>
<ImageGrid images={imageSet} />
</>
)}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/447819.html