在加载对象后设置默认状态

Question

我正在使用自定义的useFirestore钩子从我的firestore集合中检索文件对象。

import { useState, useEffect } from "react";
import { app } from "../firebase/firebase_storage";
const useFirestore = (collection) => {
const [songs, setSongs] = useState([]);
useEffect(() => {
const unsub = app
.firestore()
.collection(collection)
.onSnapshot((snap) => {
let songsArr = [];
snap.forEach((song) => {
songsArr.push({ ...song.data(), id: song.id });
});
setSongs(songsArr);
});
return () => unsub();
}, [collection]);
return { songs };
};
export default useFirestore;

然后我将这个集合存储到一个变量中

const tracks = useFirestore("songs");

console.log(tracks(正在提供

{songs: Array(2)}

我想将第一个音轨设置为默认音轨，它将被加载到波形中，我正在使用useState。

const [selectedTrack, setSelectedTrack] = useState(tracks.songs[0]);

这不起作用，因为当设置默认状态时，我传递的值是未定义的，因为我假设它没有加载。当我用占位符数据设置一些对象时，这是有效的。

所以我的想法是，以某种方式推迟分配默认状态，直到对象加载，并且它不是未定义的。

有人知道如何做到这一点吗？

Answer 1

您可以使用useEffect，并在初始化tracks后设置默认状态。

尝试：-

const tracks = useFirestore("songs");
const [selectedTrack, setSelectedTrack] = useState('');
useEffect(() => {
setSelectedTrack(tracks.songs[0]);
}, [tracks])