地图功能没有为每个元素设置值答案

【问题标题】：Map function is not setting value to each element地图功能没有为每个元素设置值
【发布时间】：2021-08-18 15:33:07
【问题描述】：

我正在使用 map 函数为对象数组设置值。但每当我传递多个对象时，它只存储最后一个。我找不到它为什么这样做。

const [tracks, setTracks] = useState([]);
const [playerTracks, setPlayerTracks] = useState([])

const playTracks = () => {
    setPlayerTracks(
        { id: 8, track_name: "Bad Guy", url: "001.mp3", artwork: "001.jpg", artist: "Ed Sheeran" },
        { id: 9, track_name: "Bury A Friend", url: "002.mp3" , artwork: "002.jpg", artist: "Taylor Swift"}
    )
    playerTracks.map(track => {
        setTracks([{
            title: track.track_name,
            artist: track.artist_name,
            audioSrc: track.url,
            image: track.artwork
        }])
    })
    console.log(playerTracks)   //  both objects
    console.log(tracks)         // only last object
}

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

您需要创建新对象，然后存储到如下状态，而不是更新地图中的状态：-

const [tracks, setTracks] = useState([]);
const [playerTracks, setPlayerTracks] = useState([])

const playTracks = () => {
    setPlayerTracks(
        { id: 8, track_name: "Bad Guy", url: "001.mp3", artwork: "001.jpg", artist: "Ed Sheeran" },
        { id: 9, track_name: "Bury A Friend", url: "002.mp3" , artwork: "002.jpg", artist: "Taylor Swift"}
    )

    const newTracks = playerTracks.map(track => {
        return {
            title: track.track_name,
            artist: track.artist_name,
            audioSrc: track.url,
            image: track.artwork
        };
    })
    setTracks(newTracks);
}

【讨论】：