Question

因此，我正在尝试为对象数组重命名对象属性。通常，响应如下所示

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

，我想将有效负载“名称”更改为“标题”，将“ id”更改为“键”。重命名后我该如何更改它并映射新的响应数据？真的会有任何帮助

Answer 1

如果我正确理解了您的问题，则可以使用ES6解构别名来实现：

Source

这会将您的回调参数分解为getResponseRename() { return this.response.map(({id: key, name: title}) => <div> <p>title: {key}</p> <span>key: {title}</span> <hr/> </div> ); }和id变量，并为它们分配一个新的变量名（又名别名）。

来自MDN documentation：

可以从对象中解压缩属性，并将其分配给名称与对象属性不同的变量。
name

Answer 2

获取数据：

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42 
console.log(bar); // true

重新格式化：

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

如何在React中重命名对象数据Response

2 个答案: