Question

我最初将其编码为从其余的专辑api获得前10张专辑。

constructor(props){
  super(props)
  this.state = { albums: [] }; // an array of objects
}

// set the first ten albums to state prop when fetched from fetch()
tenAlbums(jsonResponse) {
  let tenAlbums = [];
  // get just the first 10 albums from the response
  for(let i = 0; i < 10; i++){
    tenAlbums.push({ id: jsonResponse[i].id, title: jsonResponse[i].title })
  }
  this.setState({ albums: tenAlbums }); // Save as state property
}

这很好用，直到我意识到必须将另一个api调用的图像和缩略图的某些属性附加到相册数组中的每个对象上。我将制作另一个方法如tenImages（）并将它们附加到this.state.albums。为了做到这一点，看起来我将不得不分别将属性注入对象中，而不是上面的示例。我在弄清楚如何在React的setState中做到这一点时遇到了麻烦。有些解决方案说要复制状态，进行更改和更新。我已经尝试过了

this.setState({ albums: { ...this.state.albums[i].title, title: jsonResponse[i].title} });

但这不起作用。我想这与没有首先设置对象有关。有什么建议吗？谢谢。

Answer 1

在函数tenAlbums中使用map函数，如下所示：

const albums = jsonResponse.map((item) => ({
  id: item.id,
  title: item.title
})

map函数不会突变您的原始对象，而是返回一个新对象。那么您可以使用返回的对象（在您的情况下为相册）设置您的反应状态。此外，如果您想在其他一些api调用后设置其他属性（例如缩略图，图像等），则可以编写另一个函数并使用react setState函数，如下所示：

this.setState(prevState => {
 // you can set your other propeties here
 const newAlbums = prevState.albums.map((album) => ({
  ...album,
  thumbnail: 'some url',
  image: 'some url'
}));
 return  newAlbums
})

更新具有对象数组的状态

1 个答案: