2 回答

TA貢獻1875條經驗 獲得超5個贊
我認為你已經非常接近預期的行為了。我的處理方法如下:
const Component = props => {
const { docs } = useFirestore("books");
const id = props.match.params.id;
// useMemo - whenever `docs` change, recalculate the book variable.
// If `docs` don't change, `book` will also not change.
// Your `docs` will probably change on every snapshot.
const book = useMemo(() => docs && docs.filter(doc => doc.id === id), [docs]);
console.log(book);
useEffect(() => {
if (book) {
// Do something with the book, e.g. loadContent(book).
// Keep in mind that this will run on every snapshot.
// If you only want to run this once, you'll need an
// extra state variable to store that the effect was
// already run, and check it here.
}
}, [book]); // The effect will run whenever book changes
};
這個useFirestore鉤子看起來幾乎沒問題,只有一件事:現在即使你改變參數collection,快照監聽器也不會改變。您可能想要這樣做:
useEffect(() => {
const unsubscribe = firestore.collection(collection).onSnapshot(snapshot => {
const items = snapshot.map(doc => ({ ...doc.data(), id: doc.id }));
setDocs(items);
setLoading(false);
});
return unsubscribe;
// Whenever `collection` changes, `unsubscribe` will be called, and then this hook
// will subscribe to the new collection.
}, [collection]);
更新。
如果您希望useFirestore掛鉤僅查詢特定書籍,則需要更改掛鉤以接受并使用文檔 ID,如下所示:
const getDoc = doc => ({ ...doc.data(), id: doc.id });
const useFirestore = (collection, docId) => {
const [docs, setDocs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
let subject = firestore.collection(collection);
if (docId) {
// If docId is available, listen for changes to a
// particular document
subject = subject.doc(docId);
}
const unsubscribe = subject.onSnapshot(snapshot => {
// Notice here that if listening for a particular docId,
// the snapshot will be that document, not an array.
// To maintain the interface of the hook, I convert that
// document to an array with a single item.
const items = docId ? [getDoc(doc)] : snapshot.map(getDoc);
setDocs(items);
setLoading(false);
});
return unsubscribe;
}, [collection, docId]);
return { docs, loading };
};

TA貢獻1842條經驗 獲得超13個贊
我需要有關“useFirestore”代碼的更多信息,但您至少應該這樣編寫代碼。
不要列出 firestore 上的每個文檔來獲取一個(您為每個讀取請求付費)
在 useEffect 中加載文檔,而不是在外部
useEffect 必須依賴于 id
const Component = (props) => {
const id = props.match.params.id;
const firestore = //;
const [book, bookSet] = useState(false);
useEffect(() => {
//Depending on useFirestore code
firestore.collections('books').doc(id)
.then( snapshot => {
if ( !snapshot.exists ) {
bookSet(null);
} else {
bookSet(snapshot.data());
}
});
}, [id]);
if( book === false) return <p>Loading</p>
if (!book) return <p>Not exists</p>
return <p>Display it</p>;
};
編輯
這是我對你的“useFirestore”鉤子的猜測
const Component = (props) => {
const id = props.match.params.id;
const { docs, loading } = useFirestore('books');
useEffect(() => {
if( loading) console.log('Loading');
return;
const book = docs && docs.filter(doc => doc.id === id);
console.log({book});
},[loading, docs, id]);
};
添加回答
舉報