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

模拟预期结果（在transformRes之后）

(2) [{...}, {...}]

0: {id: 1, name: 'foo', desc: 'active'} // added desc field.
1: {id: 1, name: 'bar', desc: 'active'} // added desc field.

Answer 1

只需在地图函数中添加属性即可：

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

BTW ...是传播算子，...object表示key/value中的每个object。

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

让我知道这是否不适用于您的情况，或者您有任何疑问。

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

2 个答案: