Reactjs 如何在React中重命名对象数据响应

所以我尝试为一个对象数组重命名一个对象属性。下面是反应的大致情况

 response:  [{
        name: 'Manage User',
        id: 1,
      }, {
        name: 'Manage Region',
        id: 2,
      }, {
        name: 'Manage BTP',
        id: 3,

      } 
      ],

功能

    getResponseRename() {

      return this.response.map((data) =>
          <div>
              <p>title: {data.key}</p>
              <span>key: {data.title}</span>
              <hr/>
          </div>
      );
    }

render(){
   return(
      <div>{this.getResponseRename()}</div>
)
}

getResponseRename（）{
返回此.response.map（（数据）=>
标题：{data.key}

键：{data.title}

);
}
render（）{
返回(
{this.getResponseRename（）}
)
}

---

我想将有效负载“name”改为“title”，将“id”改为“key”。重命名后如何更改此项并映射新的响应数据？如果我正确理解您的问题，您可以使用ES6解构别名执行此操作，任何帮助都将不胜感激

getResponseRename() {
  return this.response.map(({id: key, name: title}) =>
    <div>
      <p>title: {key}</p>
      <span>key: {title}</span>
      <hr/>
    </div>
  );
}

获取您的数据：

response: [{
  name: 'Manage User',
  id: 1,
}, {
  name: 'Manage Region',
  id: 2,
}, {
  name: 'Manage BTP',
  id: 3,
}],

重新格式化：

const reformattedData = response.map((data) => {
  return {
    title: data.name,
    key: data.id,
  };
})

用它

getResponseRename() {

  return reformattedData.map((data) =>
      <div>
          <p>title: {data.key}</p>
          <span>key: {data.title}</span>
          <hr/>
      </div>
  );
}

getResponseRename（）{
返回reformattedData.map（（数据）=>
标题：{data.key}

键：{data.title}

);
}

您想在渲染方法中将

name

和

id

显示为

title

和

key

，还是想将实际数据更改为这些值？是的，我想更改实际数据

getResponseRename() {

  return reformattedData.map((data) =>
      <div>
          <p>title: {data.key}</p>
          <span>key: {data.title}</span>
          <hr/>
      </div>
  );
}