时间戳

首页 > 解决方案 > 更新具有对象数组的状态

reactjs - 更新具有对象数组的状态

问题描述

我最初对此进行编码是为了从专辑的其余 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} });

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

标签： reactjs

解决方案

在你的函数 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
})

推荐阅读