如何处理未定义的错误前使用效果执行?

Question

今天遇到了点小问题。我的在线播放器在useEffect中从DB收集歌曲，并保存在这样的状态:

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

，但在渲染我有标签，需要currentSong。音频值，该值尚未从数据库加载，因此会抛出未定义错误。我怎样才能使音频标签等待，直到currentSong设置在状态?

Answer 1

Issue

你初始化你的currentSong状态为一个未定义的值，songs[0]是未定义的，所以当访问它(currentSong.audio)时抛出错误。

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

<标题>

解决方案设置(或不设置)更好的初始状态:

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

Answer 2

尝试添加。

src={currentSong && currentSong.audio}

或

src={currentSong?.audio}

Answer 3

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

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