如何在React中正确更改多嵌套对象数组的状态？
如何在React中正确更改多嵌套对象数组的状态？
提问于 2019-05-30 07:03:25
在React中更改多个嵌套对象数组的状态的最佳方式是什么？让我们看看下面的例子:我有一个组件，它将显示每个流派的顶级播放列表。我有一个属性流派，它是一个对象数组，每个对象都有一个属性，它也是一个对象数组。如果我想将名为“财富的士兵”的歌曲及时更改为Child (让我们假设在change函数中作为参数，我已经从UI Change中提供了歌曲和流派的索引)。如何才能访问多级嵌套对象而不改变状态？
this.state = {
title: 'Top playlists',
genres: [
{
genreName: 'pop',
followers: 2456,
songs: [
{
title: 'Soldier of fortune',
author: 'Deep Purple',
},
],
},
],
};
handleChangeSongName = (e, genreIndex, songIndex) => {
// genreIndex = 0;
// songIndex = 0;
// e.target.name = title;
// e.target.value = "Child in time"
...What to do here?
}回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-30 08:10:13
您可以将handleChangeSongName函数修改为：
handleChangeSongName = (e, genreIndex, songIndex) => {
// genreIndex = 0;
// songIndex = 0;
// e.target.name = title;
// e.target.value = "Child in time"
this.setState((prevState) => {
let temp = {
...prevState,
genres: [...prevState.genres]
}
// change title "Soldier of fortune" to "Child in time"
temp.genres[genreIndex].songs[songIndex][e.target.name] = e.target.value
return temp
})}
Stack Overflow用户
发布于 2019-05-30 07:55:16
我会像这样改变你的状态：
this.state = {
title: "Top playlists",
genres: [
{
followers: 2456,
genreName: "pop",
songs: [
{
title: "Soldier of fortune",
author: "Deep Purple"
}
]
}
]
};然后
handleChangeSongName = (e, genreIndex, songIndex) => {
// genreIndex = 0;
// songIndex = 0;
// e.target.name = title;
// e.target.value = "Child in time"
...What to do here?
const genres = _.cloneDeep(this.state.genres); // create deep copy with underscore
// or like this
// const genres = JSON.parse(JSON.stringify(this.state.genres))
if(genres.length && genres[genreIndex] && genres[genreIndex].songs.length && genres[genreIndex].songs[songIndex]) {
genres[genreIndex].songs[songIndex][e.target.name] = e.target.value;
this.setState({
genres: genres
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56369597
复制相关文章
相似问题
腾讯云开发者
