如何在 React 中處理 map JSON 數據？

Question

我想顯示一個像這個網站這樣的圖標列表。

我有存儲family和圖標name的 JSON 數據。 我想 map JSON 在我的組件CardItem中傳遞家族值和名稱值。

但是，我不知道如何正確 map。 謝謝你的幫助！

import React from "react";
import { CardItem } from "./card";

export const List = () => {
  const data = [
    {
      family: "AntDesign",
      names: ["stepforward", "stepbackward", "forward", "banckward"]
    },
    {
      family: "Entypo",
      names: ["500px", "500px-with-circle", "add-to-list", "add-user"]
    }
  ];

  return (
    <>
      <ul>
        {data.map((data, index) => (
          <li key={index}>
            <CardItem
              family={data.family}
              name={data.names.map((name) => name)}
            />
          </li>
        ))}
      </ul>
    </>
  );
};

Answer 1

如果您願意，您可以嘗試對該網站上的 DOM 進行逆向工程。 這是該站點上 DOM 的一般流程：

文件：

• 應用程序.jsx
  • icon_data.json
  • 結果容器.jsx
    • 結果行.jsx
      • 結果標題.jsx
      • 結果列表.jsx
        • 結果圖標.jsx

這是以下代碼的可分叉片段：

https://codesandbox.io/s/react-icon-mapping-qfsp5?file=/src/App.jsx

icon_data.json

[
  {
    "family": "AntDesign",
    "names": ["stepforward", "stepbackward", "forward", "backward"]
  },
  {
    "family": "Entypo",
    "names": ["500px", "500px-with-circle", "add-to-list", "add-user"]
  }
]

應用程序.jsx

import React, { useEffect, useState } from "react";
import iconData from "./icon_data.json";
import ResultContainer from "./ResultContainer";

const fetchIconData = () => Promise.resolve(() => iconData);

const App = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchIconData().then((jsonData) => setData(jsonData));
  }, []);

  return <ResultContainer data={data} />;
};

export default App;

結果容器.jsx

import React from "react";
import PropTypes from "prop-types";
import ResultRow from "./ResultRow";

const ResultContainer = (props) => {
  const { data } = props;

  return (
    <>
      {data.map(({ family, names }) => {
        return <ResultRow title={family} icons={names} />;
      })}
    </>
  );
};

ResultContainer.propTypes = {
  data: PropTypes.array.isRequired
};

export default ResultContainer;

結果行.jsx

import React from "react";
import PropTypes from "prop-types";
import ResultTitle from "./ResultTitle";
import ResultList from "./ResultList";

const ResultRow = (props) => {
  const { title, icons } = props;

  return (
    <div className="Result-Row">
      <ResultTitle title={title} />
      <ResultList icons={icons} />
    </div>
  );
};

ResultTitle.propTypes = {
  title: PropTypes.string.isRequired,
  icons: PropTypes.array.isRequired
};

export default ResultRow;

結果標題

import React from "react";
import PropTypes from "prop-types";

const style = {
  background: "#F66667",
  color: "#FFFFFF",
  padding: "1em",
  margin: "0"
};

const ResultTitle = (props) => {
  const { title } = props;

  return (
    <h2 className="Result-Title" style={style}>
      {title}
    </h2>
  );
};

ResultTitle.propTypes = {
  title: PropTypes.string.isRequired
};

export default ResultTitle;

結果列表.jsx

import React from "react";
import PropTypes from "prop-types";
import ResultIcon from "./ResultIcon";

const style = {
  display: "flex",
  flexDirection: "row"
};

const ResultList = (props) => {
  const { icons } = props;

  return (
    <div className="Result-List" style={style}>
      {icons.map((icon) => (
        <ResultIcon name={icon} />
      ))}
    </div>
  );
};

ResultList.propTypes = {
  icons: PropTypes.array.isRequired
};

export default ResultList;

結果圖標.jsx

import React from "react";
import PropTypes from "prop-types";

const containerStyle = {
  display: "flex",
  flexDirection: "column",
  flex: 1,
  justifyContent: "center",
  padding: "0.5em",
  outline: "thin solid rgb(238, 238, 238)"
};

const iconStyle = {
  fontWeight: "normal",
  fontSize: "2em",
  textAlign: "center"
};

const titleStyle = {
  fontSize: "smaller",
  fontWeight: "normal",
  textAlign: "center",
  margin: "0"
};

const ResultIcon = (props) => {
  const { name } = props;

  return (
    <div className="Result-Icon-Container" style={containerStyle}>
      <span className="Result-Icon" style={iconStyle}>
        ☺
      </span>
      <h4 className="Result-Icon-Name" style={titleStyle}>
        {name}
      </h4>
    </div>
  );
};

ResultIcon.propTypes = {
  name: PropTypes.string.isRequired
};

export default ResultIcon;

Answer 2

您可以執行以下操作，

import React from "react";
import { CardItem } from "./card";

export const List = () => {
  const data = [
    {
      family: "AntDesign",
      names: ["stepforward", "stepbackward", "forward", "banckward"]
    },
    {
      family: "Entypo",
      names: ["500px", "500px-with-circle", "add-to-list", "add-user"]
    }
  ];

  return (
    <>
      <ul>
        {data.map((item, index) => (
          <li key={index}>
            {item.names.map((name) => {
               return <CardItem
                    family={item.family}
                    name={name}
            />

            })
            }
          </li>
        ))}
      </ul>
    </>
  );
};