React 转换服务器响应(向对象添加额外字段)

Question

我有一个基本函数，它发送一个axios GET请求并在状态中设置响应(对象数组(。

getData(){
axios.get(url)
.then(response => this.setState({ data: response.data })
}

但是，我想向对象添加一个附加字段。我该怎么做？

我想像这样：

getData(){
axios.get(url)
.then(response => transformRes(response.data))
.then(newResponse => this.setState({ data: newResponse })
}
transformRes(data){
data.forEach(d => {
// do something ??
}
// return newData ??
}

模拟示例数据(来自服务器(

(2) [{...}, {...}]
0: {id: 1, name: 'foo'}
1: {id: 2, name: 'bar'}

模拟预期结果(转换后(

(2) [{...}, {...}]
0: {id: 1, name: 'foo', desc: 'active'} // added desc field.
1: {id: 1, name: 'bar', desc: 'active'} // added desc field. 

Answer 1

只需在map函数中添加属性：

getData(){
axios.get(url)
.then(response => {
const res = response.data
this.setState({ data: res.map(object => {
return {...object, desc: 'active'}
})})
})
}

顺便说一句，...是传播运算符，...object意味着object中的每个key/value。

Answer 2

基本上，您希望将旧对象映射到新对象。使用.forEach您走在正确的轨道上

getData() {
axios.get(url)
.then(response => {
var newData = response.map((data) => {
data.desc = 'active'; //add your properties here
return data;
});
this.setState({data: newData});
});
}

如果这不适合您的情况或您有疑问，请告诉我。