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

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

我想将有效负载name更改为title，将id更改为key。

如何更改此设置并在重命名后映射新的响应数据？任何帮助将不胜感激。

Answer 1

如果我正确理解你的问题，你可以使用 ES6 解构别名来做到这一点:

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

这会将您的回调参数解构为 id 和 name 变量，并为它们分配一个新的变量名称(也称为别名)。

<小时/>

来自MDN documentation :

A property can be unpacked from an object and assigned to a variable with a different name than the object property.

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

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