切片返回未定义

Question

我正在构建一个 Spotify 克隆网站，当我尝试使用切片方法返回一个数组时，它返回未定义并将我的 Vite 网页留空。我也尝试过使用地图，但它也返回未定义不确定问题出在代码中。下面是使用的代码以及检查页面控制台所显示内容的屏幕截图。

import React, { useContext } from "react";
import { assets, songsData } from "../assets/assets";
import { PlayerContext } from "../context/PlayerContext";

export const Player = () => {
  const { seekBar, seekBg, playStatus, play, pause, track, time, previous, next, seekSong } =
    useContext(PlayerContext);
  return (
    <div className="h-[10%] bg-black flex justify-between items-center text-white px-4">
      <div className="hidden lg:flex items-center gap-4">
        <img className="w-12" src={track.image} alt="" />
        <div>
          <p>{track.name}</p>
          <p>{track.desc.slice(0, 12)}</p>
    </div>
  </div>
  <div className="flex flex-col items-center gap-1 m-auto">
    <div className="flex gap-4 ">
      <img
        className="w-4 cursor-pointer"
        src={assets.shuffle_icon}
        alt=""
      />
      <img onClick={previous} className="w-4 cursor-pointer" src={assets.prev_icon} alt="" />
      {playStatus ? (
        <img
          onClick={pause}
          className="w-4 cursor-pointer"
          src={assets.pause_icon}
          alt=""
        />
      ) : (
        <img
          onClick={play}
          className="w-4 cursor-pointer"
          src={assets.play_icon}
          alt=""
        />
      )}

      <img onClick={next} className="w-4 cursor-pointer" src={assets.next_icon} alt="" />
      <img className="w-4 cursor-pointer" src={assets.loop_icon} alt="" />
    </div>
    <div className="flex items-center gap-5">
      <p>{time.currentTime.minute}:{time.currentTime.second}</p>
      <div
        ref={seekBg} onClick={seekSong}
        className="w-[60vw] max-w-[500px] bg-gray-300 rounded-full cursor-pointer"
      >
        <hr
          ref={seekBar}
          className="h-1 border-none w-0 bg-green-800 rounded-full"
        />
      </div>
      <p>{time.totalTime.minute}:{time.totalTime.second}</p>
    </div>
  </div>
  <div className="hidden lg:flex items-center gap-2 opacity-75">
    <img className="w-4" src={assets.plays_icon} alt="" />
    <img className="w-4" src={assets.mic_icon} alt="" />
    <img className="w-4" src={assets.queue_icon} alt="" />
    <img className="w-4" src={assets.speaker_icon} alt="" />
    <img className="w-4" src={assets.volume_icon} alt="" />
    <div className="w-20 bg-slate-50 h-1 rounded"></div>
    <img className="w-4" src={assets.mini_player_icon} alt="" />
    <img className="w-4" src={assets.zoom_icon} alt="" />
  </div>
</div>


 );
};

Answer 1

控制台中的错误显示“无法读取未定义的属性（读取‘切片’）”。这意味着它是您尝试应用

slice()

方法的变量，即

track.desc

或者具体来说

desc

，未定义。

检查并确保从上下文中破坏的

desc

具有正确的类型，或者进行一些稳健的编码，例如

track.desc?.slice()

或

(track.desc || '').slice()

。