Javascript 如何在React中映射JSON数据？

我想显示一个图标列表，如

我有JSON数据存储图标的

系列

和

名称

。我想映射JSON以在我的组件

CardItem

中传递族值和名称值

然而，我不知道如何正确地映射它。谢谢你的帮助

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

从“React”导入React；
从“/card”导入{CardItem}；
导出常量列表=（）=>{
常数数据=[
{
家庭：“蚂蚁设计”，
名称：[“向前走”、“向后走”、“向前走”、“向前走”]
},
{
家庭：“Entypo”，
名称：[“500px”、“带圆圈的500px”、“添加到列表”、“添加用户”]
}
];
返回(

{data.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((item, index) => (
          <li key={index}>
            {item.names.map((name) => {
               return <CardItem
                    family={item.family}
                    name={name}
            />

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

从“React”导入React；
从“/card”导入{CardItem}；
导出常量列表=（）=>{
常数数据=[
{
家庭：“蚂蚁设计”，
名称：[“向前走”、“向后走”、“向前走”、“向前走”]
},
{
家庭：“Entypo”，
名称：[“500px”、“带圆圈的500px”、“添加到列表”、“添加用户”]
}
];
返回(

{data.map（（项目，索引）=>(

{item.names.map（（name）=>{
返回
})
}

))}

);
};

如果您愿意，可以尝试在该网站上对DOM进行反向工程。以下是该站点上DOM的一般流程：

文件夹：

• App.jsx
  • icon_data.json
  • ResultContainer.jsx
    • ResultRow.jsx
      • resultitle.jsx
      • ResultList.jsx
        • ResultIcon.jsx

下面是一段可分叉的代码片段：

icon_data.json

[
{
“家庭”：“蚂蚁设计”，
“名称”：[“向前”、“向后”、“向前”、“向后”]
},
{
“家庭”：“Entypo”，
“名称”：[“500px”、“带圆圈的500px”、“添加到列表”、“添加用户”]
}
]

App.jsx

import React，{useffect，useState}来自“React”；
从“/icon_data.json”导入Iconda；
从“/ResultContainer”导入ResultContainer；
const fetchiconda=（）=>Promise.resolve（（）=>iconda）；
常量应用=（）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
fetchiconda（）。然后（（jsonData）=>setData（jsonData））；
}, []);
返回；
};
导出默认应用程序；

ResultContainer.jsx

从“React”导入React；
从“道具类型”导入道具类型；
从“/ResultRow”导入ResultRow；
const ResultContainer=（道具）=>{
const{data}=props；
返回(
{data.map（{family，names}）=>{
返回；
})}
);
};
ResultContainer.propTypes={
数据：需要PropTypes.array.isRequired
};
导出默认结果容器；

ResultRow.jsx

从“React”导入React；
从“道具类型”导入道具类型；
从“/ResultTitle”导入ResultTitle；
从“/ResultList”导入结果列表；
const ResultRow=（道具）=>{
const{title，icons}=props；
返回(
);
};
resultitle.propTypes={
标题：PropTypes.string.isRequired，
图标：PropTypes.array.isRequired
};
导出默认结果窗口；

结果

从“React”导入React；
从“道具类型”导入道具类型；
常量样式={
背景：“F66667”，
颜色：“FFFFFF”，
填充：“1em”，
边距：“0”
};
const resultitle=（道具）=>{
const{title}=props；
返回(
{title}
);
};
resultitle.propTypes={
标题：PropTypes.string.isRequired
};
导出默认结果；

ResultList.jsx

从“React”导入React；
从“道具类型”导入道具类型；
从“/ResultIcon”导入ResultIcon；
常量样式={
显示：“flex”，
flexDirection：“行”
};
常量结果列表=（道具）=>{
const{icons}=props；
返回(
{icons.map（（icon）=>(
))}
);
};
ResultList.propTypes={
图标：PropTypes.array.isRequired
};
导出默认结果列表；

ResultIcon.jsx

从“React”导入React；
从“道具类型”导入道具类型；
常量集装箱样式={
显示：“flex”，
flexDirection:“列”，
弹性：1，
辩护内容：“中心”，
填充：“0.5em”，
大纲：“薄固体rgb（238238238238）”
};
常数iconStyle={
fontWeight:“正常”，
字体大小：“2米”，
textAlign：“居中”
};
常数标题样式={
fontSize：“更小”，
fontWeight:“正常”，
textAlign：“居中”，
边距：“0”
};
const ResultIcon=（道具）=>{
const{name}=props；
返回(
☺
{name}
);
};
ResultIcon.propTypes={
名称：PropTypes.string.isRequired
};
导出默认结果；

data.names.map（（name）=>name）

不起任何作用，你应该使用

data.names

你想要一个名为

CardItem

的元素（意思是合并两个子数组）还是一级项为

CardItem

的元素？@MetallimaX我想要一个名为的CardItem:）

data.names.map（name）=>

我不认为嵌套

映射将表现良好，因为结果将是一个列表列表。非常感谢！！您有一个非常好的带有
项的键。family
，而且您还忘了在内部数组上放置一个键（名称）。非常清楚！非常感谢。
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;

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;

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;

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;

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;