Javascript React转换服务器响应（向对象添加额外字段）

我有一个基本函数，它发送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 ??
}

模拟示例数据（来自服务器）

模拟预期结果（转换后）

---

基本上，您希望将旧对象映射到新对象。使用

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

---

如果这对您的情况不起作用或您有问题，请告诉我。

只需在映射函数中添加属性：

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

---

顺便说一句，

..

是扩展运算符，

..object

表示

object

中的每个

键/值

我必须复制每个字段吗？e、 g.data.id=data.id？实际上，我把上面的代码搞乱了。请看固定版本。不，您不必复制现有字段，只需复制新字段。您可以使用

Object.assign

，而不是spread运算符（如果您使用的是react），谢谢，这很有效。解释得也不错。不过我不得不做些小改动。

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

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