gRomkoPlayer/src/components/Track.js

import React from "react";
import { setCurrentTrack } from "../actions/playerActions";
// import {getTrack, setGetTrack} from "./Playlist"

export const Track = ({
  pressedTracks,
  setPressedTracks,
  onPlaylistTrackPressed,
  track,
  dispatch,
  arr,
  playlistsItem,
  trackIndex,
  key,
  getTrack,
  setGetTrack,
  playlistsItemTrack,
  highlighted,
  playlistFilteredTracks
}) => {
  // console.log("trackIndex: ", trackIndex)
  // console.log("track in Track: ", track)
  // console.log("track`s 0wner && ID: ", track.owner)
  // if (track.owner.login == localStorage.user) {
  //   localStorage.id = track.owner._id
  // };

  // const { url, trackIndex } = track;
  //выводм по треку из плейлиста
  // const setTrack = ()=>{

  // }
  // dispatch(setTrack(track));
  // let artist = "";
  // let album = "";
  // if (track.id3) {
  //   if (track.id3.artist && track.id3.album) {
  //     artist = track.id3.artist;
  //     album = track.id3.album;
  //   } else {
  //   }
  // } else {
  // }
  // const [addTrack, setAddTrack] = useState();
  // const [prevTrack, setPrevTrack] = useState();
  return (
    <>
      {/* ТУТ ОШИБКА ПЕРЕРЕНДЕРИНГА */}
      {track.id3 ? (
        track.id3.artist || track.id3.album ? (
          <li
            className={highlighted ? "highlighted" : null}
            // key={key}
            // onClick={(e) =>
            //   setPressedTracks()
            //   //  setGetTrack(track.url)
            //   // onPlaylistTrackPressed(e.target.value) 
            // } 
            >
              {/* //когда кликаем на плейлист,он устанавливается на текущий в редакс(сделать в редаксе(экшен, редюсер, и др.))
              //задействовать поле плейлист в редаксе
              () => {
                // debugger
                // setCurrentTrack(trackIndex); 
                // && 
                // setGetTrack(playlistFilteredTracks) && 
                // console.log("trackIndex(in Track): ", trackIndex )},
                setGetTrack(track.url)//works
                // playlistsItemTrack.map((itemTrack)=> setGetTrack(itemTrack.url));
                // playlistsItemTrack.map((itemTrack)=> console.log('itemTrack', itemTrack));
                // console.log('playlistsItemTrack ', playlistsItemTrack);
                // console.log(playlistsItem);
                //или додуматься самому или посмотреть в компоненте library
                //  setAddTrack(track.url)
                // && setPrevTrack(addTrack)
                // setCurrentTrack(e.target.id)
                }
              > */}
                  <span>{track.id3.artist}</span>
                  <span>{track.id3.album}</span>
              </li>
            ) : (
              ""
            )
          ) : (
            ""
          )}
          {/* {setPrevTrack(addTrack)} */}
          {/* {addTrack? <Player turl={addTrack} /> : <Player turl={prevTrack} />}для того что бы в пределах плейлиста листать треки кнопками  */}
        </>
      );
    };