如何在 React TS 中为对象（Map 数据结构）中的每个项目渲染自定义元素？

Question

我一直在使用此方法从数组中渲染多个自定义元素，但这是我第一次使用地图数据结构进行此操作。它编译得很好，但什么也不渲染。我在此处设置了一个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>
  );
}

Answer 1

你好 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} />
            </>
          );
        })}

Answer 2

您正在使用 .forEach 方法 - 该方法不返回任何内容，而是使用相同但确实返回内容的 .map

 {onlineImages?.map((imageSet, category) => 
        <>
          <div>Image Category: {category}</div>
          <ImageGrid images={imageSet} />
        </>
    )}