FireStore - 实时数据 - 在快照上使用时遇到问题

Question

使用以下组件，我可以连接到Cloud FireStore集合并向其中添加新文档。

现在，我正在尝试使用 onSnapshot 方法使用实时数据，但我不确定如何在代码中实现它。

import React, { useState } from 'react';
import { db } from '../firebase';
const AddCard = ({ totalDoclNumbers }) => {
const [newOriginalText, setNewOriginalText] = useState([]);
const [newTranslatedText, setNewTranslatedText] = useState([]);
const nextNumber = totalDoclNumbers + 1;
const onAdd = async () => {
await db.collection('FlashCards').add({
originalText: newOriginalText,
translatedText: newTranslatedText,
customId: Number(nextNumber)
});
};
return (
<ul className='list'>
<li className='list__item list__item--add' key={nextNumber}>
<input
type='text'
defaultValue={nextNumber}
/>
<div>
<textarea
onChange={(e) => setNewOriginalText(e.target.value)}
/>
)}
</div>
<textarea
onChange={(e) => setNewTranslatedText(e.target.value)}
/>
<button onClick={onAdd}>
Add
</button>
</li>
</ul>
);
};
export default AddCard;

这是我尝试过的：

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
const AddCard = ({ totalDoclNumbers }) => {
const [newOriginalText, setNewOriginalText] = useState([]);
const [newTranslatedText, setNewTranslatedText] = useState([]);
const nextNumber = totalDoclNumbers + 1;
const onAdd = async () => {
await db
.collection('FlashCards')
.add({
originalText: newOriginalText,
translatedText: newTranslatedText,
customId: Number(nextNumber),
})
.onSnapshot((snapshot) => {
let changeds = snapshot.docChanges();
changeds.forEach((change) => {
if (change.type === 'added') {
renderDocList();
}
});
});
};
const renderDocList = () => {
return (
<ul>
<li key={nextNumber}>
<input
type='text'
defaultValue={nextNumber}
/>
<div>
<textarea
onChange={(e) => setNewOriginalText(e.target.value)}
/>
)}
</div>
<textarea
onChange={(e) => setNewTranslatedText(e.target.value)}
/>
<button onClick={onAdd}>
Add
</button>
</li>
</ul>
);
};
return (
<>
{renderDocList()}
</>
);
};
export default AddCard;

但是一旦我单击"添加"按钮，就会收到此错误：

未处理的拒绝(类型错误(：firebase__WEBPACK_IMPORTED_MODULE_1_.db.collection(...(。添加(...(。onSnapshot 不是一个函数

Answer 1

onSnapshot 不适用于 add。这个想法是你想订阅集合，以便每当发生更改时它都会告诉你。

所以你需要这样做

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
db.collection('FlashCards')
.onSnapshot((snapshot) => {
let changeds = snapshot.docChanges();
changeds.forEach((change) => {
if (change.type === 'added') {
renderDocList();
}
});
});
const AddCard = ({ totalDoclNumbers }) => {
const [newOriginalText, setNewOriginalText] = useState([]);
const [newTranslatedText, setNewTranslatedText] = useState([]);
const nextNumber = totalDoclNumbers + 1;
const onAdd = async () => {
await db
.collection('FlashCards')
.add({
originalText: newOriginalText,
translatedText: newTranslatedText,
customId: Number(nextNumber),
})
};
const renderDocList = () => {
return (
<ul>
<li key={nextNumber}>
<input
type='text'
defaultValue={nextNumber}
/>
<div>
<textarea
onChange={(e) => setNewOriginalText(e.target.value)}
/>
)}
</div>
<textarea
onChange={(e) => setNewTranslatedText(e.target.value)}
/>
<button onClick={onAdd}>
Add
</button>
</li>
</ul>
);
};
return (
<>
{renderDocList()}
</>
);
};
export default AddCard;

您可以在此处找到其他示例