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

Question

我一直在使用此方法从数组中渲染多个自定义元素，但这是我第一次使用 map 数据结构来执行此操作。它编译得很好，但什么也不渲染。我已经设置了一个codesandbox here .

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

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