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

Question

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

数据的结构如下：

{
  "data": {
    "details": [
      {     
        "address_line_1": "C O Cwtsatotravel",
        "address_line_2": "Not Available",
        "city_name": "Arlington",
        "state_name": "-",
        "country_name": "Japan",
        "postal_code": "22203",
        "phone_number": "7638527755",        
      }
    ]
  }
}

这就是我想要在 react 中做的事情

  const profile_info = data?.details;
  
    const profileHeaders = [
    'Address1',
    'Address2'
    'City',
    'State',
    'Postal Code',
    'Country',
    'Phone',
  ];
  
  return (
    <Grid
      id="top-card"
      className={classes.mainContainer}
      container
      style={{
        marginBottom: '4px',
      }}
    >
      {/* <Grid item md={11} lg={11} id="item-card"> */}
      <Grid container item>
        <Typography variant="subtitle1">
          {profile_info.agency_name}
        </Typography>
      </Grid>

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

当我这样做时，它会在 UI 上为标题获取所有空白值

请帮忙，谢谢！

Answer 1

使用相同 [as in data] keys对您的标题进行编码：

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 为可迭代（带有道具或数组的对象）元素“别名”：

// choose the right data source - depends on what logged out
// console.log(data);
// if(data) console.log(data.details); //... step by step

// const profile_info = data?.details;
// const profile_info = data?.data.details;
const profile_info = data?.details[0]; // object in array here

从headers 和profile_info 渲染值

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>

或者您可以使用.map 执行相同操作（如果需要，您可以使用index）

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

Answer 2

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

1. const profile_info = data?.details;

您的详细信息存储在财产data.data.details，而不是data.details 所以先解决这个问题：

const profile_info = data?.data.details;

1. ProfileHeaders 中的项目没有像 profile_info 中的属性那样映射：您有一个 profile_info['address_line_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>
    ))}

我没有检查 profile_info 是否未定义，但您必须在组件中进行检查以避免错误。