React, проблема с обновлением состояния

Я пытаюсь создать кнопку которая будет перемешивать плейлист(массив объектов), а по второму клику возвращать не перемешанный плейлист. Почему-то setOldPlaylist не сохраняет предыдущее состояние. Я полагаю, проблема с обновлением состояния.

import React, { useState } from 'react'
import shuffleTracks from './shuffle'    
import { connect } from "react-redux";

function ShuffleButton({ setPlaylist, playlist, trackId }) {
  const [oldPlaylist, setOldPlaylist] = useState([]);
  const [shuffle, setShuffle] = useState(false);

  const handleShuffle = () => {
    if (shuffle) {
      setPlaylist(oldPlaylist);
      setShuffle(!shuffle);
    } else {
      setOldPlaylist(playlist);
      setPlaylist(shuffleTracks(playlist, trackId));
      setShuffle(!shuffle);
    }
  }

  return (
    <button onClick={handleShuffle} >
      <Shuffle />
    </button>
  )
}
const mapStateToProps = (state) => {
  return {
    playlist: state.playlist.playlist,
    trackId: state.player.trackId,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setPlaylist: (tmp) => dispatch(setPlaylist(tmp)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ShuffleButton);

Если в setOldPlaylist передавать любой другой элемент (объект, массив или переменную) помимо playlist, то код работает исправно. Буду благодарен если поможете или предложите более элегантное решение.


Ответы (0 шт):