javascript - 如何从对象 react 中渲染键值对

Question

这是我通过 API 请求存储在 this.state.profile 中的对象数据。

我需要知道的是将键中的值渲染到网络浏览器。我正在尝试使用下面的代码，但它不起作用。另外，如何渲染该对象旁边的对象？这一切都太令人困惑了:(

{
    "localizedLastName": "King",
    "lastName": {
        "localized": {
            "en_US": "King"
        },
        "preferredLocale": {
            "country": "US",
            "language": "en"
        }
    },
    "firstName": {
        "localized": {
            "en_US": "Benn"
        },
        "preferredLocale": {
            "country": "US",
            "language": "en"
        }
    },
    "profilePicture": {
        "displayImage": "urn:li:digitalmediaAsset:C5603AQGjLGZPOyRBBA"
    },
    "id": "fm0B3D6y3I",
    "localizedFirstName": "Benn"
}

我如何尝试渲染它:

const { profile } = this.state;

const profileList = Object.keys(profile).map((key,value)=>{
  return (
      <div>{key}{value.toString()}</div>
  );
})

{ profileList }

Answer 1

尝试:

return (
   {Object.entries(profile).map(([key,value]) => {
      return (
         <div>{key} : {value.toString()}</div>
      )
   })}
)

迭代需要在返回内部进行，并且映射在其迭代内部返回。