![](/img/trans.png)
[英]When changed state of a multiple nested array of objects in React get error
[英]How to correctly change state of a multiple nested array of objects in React?
在 React 中更改多个嵌套对象数组的状态的最佳方法是什么? 让我们看看下面的例子:我有一个组件,它将显示每个流派的顶级播放列表。 我有一个属性类型,它是一个对象数组,每个对象都有一个属性歌曲,它也是一个对象数组。 如果我想将名为Soldier of Fortune 的歌曲及时更改为Child(假设在Change 函数中作为参数,我已经从UI 更改中提供了歌曲和流派的索引)。 如何访问多个级别的嵌套对象而不改变状态?
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?
}
您可以将 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
})
}
我会像这样改变你的状态:
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
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.