Javascript 循环遍历数据对象并将标头映射到React中的值

我有一个问题，关于如何使用这些数据将标题映射到相应的值，并将其放在UI上

这就是数据的结构：

{
“数据”：{
“详情”：[
{     
“地址第1行”：“C O Cwtsatotravel”，
“地址行2”：“不可用”，
“城市名称”：“阿灵顿”，
“州名称”：“-”，
“国家名称”：“日本”，
“邮政编码”：“22203”，
“电话号码”：“7638527755”，
}
]
}
}

您的代码中存在一些关键错误：

const profile\u info=data？详细信息

您的详细信息存储在属性

data.data.details

，而不是

data.details

因此，首先要解决这个问题：

const profile_info = data?.data.details;

ProfileHeader中的项目没有像profile_info中的属性那样映射：您有一个

profile_info['address\u line\u 1']

，但没有

profile_info['Address1']

，这是您试图在组件中执行的操作

要使其按您想要的方式工作，您应该正确映射标题和属性

const profileHeaders = [
    {
        title: "Address1",
        property:  "address_line_1"
    },
    {
        title: "Address2",
        property:  "address_line_2"
    },
    // map all other properties like above.
]

那么你可以这样做：

   {profileHeaders.map((v) => (
      <Grid
        item
        style={{
          padding: '0px 4px',
        }}
      >
        <Typography className={classes.profileData} gutterBottom={true}>
          {v.title}
        </Typography>
        <Typography className={classes.profileData}>
          {' '}
          {profile_info[v.property]}
        </Typography>
      </Grid>
    ))}

{profileHeaders.map（（v）=>(
{v.title}
{' '}
{profile_info[v.property]}
))}

---

我不会检查配置文件信息是否未定义，但您必须在组件中执行此操作以避免错误。

使用与数据中相同的键对标题进行编码：

const headers = {
    "address_line_1": "Address1",
    "address_line_2": "Address2",
    "city_name": "City",

稍后，您可以列出它

Object.entries(headers).forEach(([key, value]) => console.log(`${key}: ${value}`));

console.log（data）

查看其结构，并使用

const

来“alias”iterable（带有道具或数组的对象）元素：

从

标题

和

配置文件信息

Object.entries(headers).forEach(([key, value]) => (
 <Grid
    key={key}
    item
    style={{
      padding: '0px 4px',
    }}
  >
    <Typography className={classes.profileData} gutterBottom={true}>
      {value}
    </Typography>
    <Typography className={classes.profileData}>
      {' ??? use css instead! '}
      {profile_info[key]}
    </Typography>
  </Grid>

---

您的变量

数据

与您构建的

数据

相同吗？是的，没错，非常感谢，我很感激。我会尝试并发布另一条评论。真的很感谢这么详细的回复，我一定会尝试并让你知道。。再次感谢..非常感谢，它完全按照我想要的方式工作：）将解决方案标记为正确答案

Object.entries(headers).forEach(([key, value]) => (
 <Grid
    key={key}
    item
    style={{
      padding: '0px 4px',
    }}
  >
    <Typography className={classes.profileData} gutterBottom={true}>
      {value}
    </Typography>
    <Typography className={classes.profileData}>
      {' ??? use css instead! '}
      {profile_info[key]}
    </Typography>
  </Grid>

  Object.keys(headers).map((key, idx) => (
    <Element key={key}>
       <Name title={headers[key]} />
       <Value data={profile_info[key]} />