代码之家 › 专栏 › 技术社区 › Samuel Zrna

如何在React TS中为对象(地图数据结构)中的每个项目呈现自定义元素?

react-tsx state dictionary reactjs

Samuel Zrna · 技术社区 · 2 年前

我一直在使用这种方法从一个数组中渲染多个自定义元素,但这是我第一次使用地图数据结构。它编译得很好,但没有呈现任何内容。我已经建立了一个代码沙盒 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>
  );
}

2 回复 | 直到 2 年前

Zargold 2 年前

嗨,塞缪尔:我想你应该先把地图转换成数组,然后使用 Array.prototype.map 方法,它实际返回应用了函数的原始数组的副本。

因为你可能已经弄明白了 return 语句在一段时间内不起任何作用 forEach 函数(更确切地说,它只会停止代码的执行,但不会将任何内容带回外部上下文)。

如果你真的想使用forEach,你必须使用数组或对象来捕捉它,然后使用Object。条目/。映射以在其上迭代


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 方法,可以帮助将映射转换为键/值对条目数组: [[key1, val1], [key2, val2]] .它本质上等同于跑步 Object.entries(someObject) .

{Array.from(onlineImages || []).map(([category, imageSet]) => {
          return (
            <>
              <div>Image Category: {category}</div>
              <ImageGrid images={imageSet} />
            </>
          );
        })}

polisen 2 年前

您正在使用。forEach方法——它不返回任何内容,而是使用。相同但确实返回内容的映射

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