Javascript 如何在执行useEffect之前处理未定义的错误？

今天有点小问题。我的在线播放器正在从数据库中收集歌曲，并保存在以下状态：

 const [songs, setSongs] = useState([]);
 const [currentSong, setCurrentSong] = useState(songs[0]);

  async function getSongs() {
    const songsRes = await axios.get("http://localhost:5000/song/");
    await setSongs(songsRes.data);
  }

  useEffect(() => {
    getSongs();
  }, []);

  const songEndHandler = async () => {
    let currentIndex = songs.findIndex((song) => song.id === currentSong.id);
    await setCurrentSong(songs[(currentIndex + 1) % songs.length]);
    playAudio(isPlaying, audioRef);
    return;
  };


  return (
    <div>
      <audio
        onLoadedMetadata={timeUpdateHandler}
        onTimeUpdate={timeUpdateHandler}
        ref={audioRef}
        src={currentSong.audio}
        onEnded={songEndHandler}
      ></audio>
    </div>
  );

const[songs，setSongs]=useState（[]）；
const[currentSong，setCurrentSong]=useState（歌曲[0]）；
异步函数getSongs（）{
const songsRes=等待axios.get（“http://localhost:5000/song/");
等待歌曲（歌曲数据）；
}
useffect（（）=>{
getSongs（）；
}, []);
const songEndHandler=async（）=>{
让currentIndex=songs.findIndex（（song）=>song.id==currentSong.id）；
等待设置当前歌曲（歌曲[（当前索引+1）%songs.length]）；
播放音频（iPlay、audioRef）；
返回；
};
返回(
);

但在render中，我有一个需要currentSong.audio值的标记，该值尚未从数据库加载，它抛出了未定义的错误。如何使音频标签等待当前歌曲设置为状态？

尝试添加

src={currentSong && currentSong.audio}

或

尝试添加

src={currentSong && currentSong.audio}

或

---

使用可选的链接运算符？。试试这个，希望它能解决你的问题

 <audio
    onLoadedMetadata={timeUpdateHandler}
    onTimeUpdate={timeUpdateHandler}
    ref={audioRef}
    src={currentSong?.audio}
    onEnded={songEndHandler}
  ></audio>  

---

使用可选的链接操作符？。试试这个，希望它能解决你的问题

 <audio
    onLoadedMetadata={timeUpdateHandler}
    onTimeUpdate={timeUpdateHandler}
    ref={audioRef}
    src={currentSong?.audio}
    onEnded={songEndHandler}
  ></audio>  

问题 您将

currentSong

状态初始化为未定义的值，

songs[0]

未定义，因此访问时会抛出错误（

currentSong.audio

）

解决方案 设置（或不设置）更好的初始状态：

const [songs, setSongs] = useState([]);
const [currentSong, setCurrentSong] = useState();

有条件地呈现UI，直到定义了

currentSong

：

return (
  <div>
    {currentSong && (
      <audio
        onLoadedMetadata={timeUpdateHandler}
        onTimeUpdate={timeUpdateHandler}
        ref={audioRef}
        src={currentSong.audio}
        onEnded={songEndHandler}
      />
    )}
  </div>
);

返回(
{currentSong&&(
)}
);

问题 您将

currentSong

状态初始化为未定义的值，

songs[0]

未定义，因此访问时会抛出错误（

currentSong.audio

）

解决方案 设置（或不设置）更好的初始状态：

const [songs, setSongs] = useState([]);
const [currentSong, setCurrentSong] = useState();

有条件地呈现UI，直到定义了

currentSong

：

return (
  <div>
    {currentSong && (
      <audio
        onLoadedMetadata={timeUpdateHandler}
        onTimeUpdate={timeUpdateHandler}
        ref={audioRef}
        src={currentSong.audio}
        onEnded={songEndHandler}
      />
    )}
  </div>
);

返回(
{currentSong&&(
)}
);