Блог

Я использую функцию 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
}
 

Вместо обновления состояния на карте вам нужно создать новый объект, а затем сохранить его в состоянии, как показано ниже:-

 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);
}