Reactjs 更新具有对象数组的状态

我最初编写此代码是为了从唱片的RESTAPI获取前10张唱片

构造函数（道具）{
超级（道具）
this.state={albums:[]}；//对象数组
}
//从fetch（）获取时，将前十个相册设置为state prop
十本相册（jsonResponse）{
设tenAlbums=[]；
//仅从回复中获取前10张专辑
for（设i=0；i<10；i++）{
tenAlbums.push（{id:jsonResponse[i].id，title:jsonResponse[i].title}）
}
this.setState（{albums:tenAlbums}）；//另存为状态属性
}

这很好，直到我意识到我必须将另一个api调用中的图像和缩略图的一些属性附加到albums数组中的每个对象。我打算创建另一个方法，比如tenImages（），并将它们附加到this.state.albums。为了做到这一点，看起来我必须将属性单独注入到对象中，而不是上面的示例。在React的设置状态下，我很难理解如何执行此操作。一些解决方案说，复制状态，进行更改和更新。例如，我试过

this.setState（{albums:{…this.state.albums[i].title，title:jsonResponse[i].title}）；

---

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

在函数相册中使用映射函数，如下所示：

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

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

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

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

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

---

这是因为

setState

的工作方式。React状态更新是批处理的，并且是异步的。您可以使用

.map

像：

const-tenAlbums=jsonResponse.map（o=>（{id:o.id，title:o.title}））

和设置状态：

this.setState（{albums:tenAlbums}）

如果我然后调用上面的代码，例如tenImages，它会覆盖对象吗（包括它们的属性）在相册中？