javascript - 如何在 React 中正确更改多个嵌套对象数组的状态？

Question

在 React 中更改多个嵌套对象数组的状态的最佳方法是什么？让我们看下面的示例:我有一个组件将显示每种流派的顶部播放列表。我有一个属性genre，它是一个对象数组，每个对象都有一个属性songs，它也是一个对象数组。如果我想将名为 Soldier of Fortune 的歌曲更改为 Child in Time(假设在 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?
  }

Answer 1

您可以将您的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
})

}