React Hooks：如何更新 state 中的嵌套数组属性？

Question

I have a state of arrays. The array has an array nested inside it. This is what my state looks like:

const [record, setRecord] = useState([
    {
        name: "Pink Floyd",
        rank: 1,
        songs: [
            {
                name: "A",
                year: "1970",
                downloads: "10",
            },
            {
                name: "B",
                year: "1980",
                downloads: "20",
            },
            {
                name: "C",
                year: "1990",
                downloads: "5",
            },
        ],
    },
    {
        name: "Led Zeppelin",
        rank: 2,
        songs: [
            {
                name: "D",
                year: "1965",
                downloads: "25",
            },
            {
                name: "E",
                year: "1975",
                downloads: "65",
            },
            {
                name: "F",
                year: "1985",
                downloads: "90",
            },
        ],
    },
]);

I am able to update the rank property by doing this:

setRecord(prevRecord =>
    prevRecord.map((el) =>
        el.name == "someName" ? { ...el, rank: "someRank" } : el
    )
);

Now, I want to update the 'downloads' property which is nested inside songs. How can I update the downloads property?

Answer 1

you must iterate through your state and look for item you want to change

  const newState = record.map((item) => {
    if (item.name === 'YOUR_DESIRE_NAME_TO_MODIFY') {
      const newSongs = item.songs.map((song) => {
        if (song.name === 'DESIRE_SONG_NAME_TO_MODIFY') {
          song.downloads = '100'
        }
        return song
      })
      item.songs = newSongs
    }
    return item
  })

  setRecord(newState)