从云消防局提取数据库记录的React-火药库钩子
我正在努力弄清楚如何在我的react应用程序中使用反应-火源-钩，这样我就可以简化数据库中的调用。
我以前的版本(在这个问题上帮助解决)使用了这个类组件和一个componentDidMount函数(它成功了)：
class Form extends React.Component {
state = {
options: [],
}
async componentDidMount() {
// const fsDB = firebase.firestore(); // Don't worry about this line if it comes from your config.
let options = [];
await fsDB.collection("abs_for_codes").get().then(function (querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, ' => ', doc.data());
options.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id
});
});
});
this.setState({
options
});
}我现在正在学习如何使用钩子从数据库中获取数据，使用react firebase-钩子。我目前的尝试是：
import { useDocumentOnce } from 'react-firebase-hooks/firestore';我也尝试过从“react firebase-hooks/firestore”导入{ useDocument }；
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('abs_for_codes'),
options.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id
}),
);这会产生一个错误，即：“useDocumentOnce”未定义
我尝试过(这也是不正确的)：
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('abs_for_codes'),
{snapshot.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id,
})},
);我怎么才能从火炉里得到一个收藏呢？我正在尝试填充一个select菜单，其中包含从一个名为abs_for_codes的防火墙集合中读取的选项。
我认为useState的要点是我不再需要声明一个状态，我只需要调用我在下面添加了我的选择尝试：
<Select
className="reactSelect"
name="field"
placeholder="Select at least one"
value={valuesSnapshot.selectedOption}
options={snapshot}
onChange={handleMultiChangeSnapshot}
isMulti
ref={register}
/>供参考，我有两个其他的选择菜单在我的形式。我用来设置这些选项的consts是手动定义的，但是建立它们的值的过程如下：
const GeneralTest = props => {
const { register, handleSubmit, setValue, errors, reset } = useForm();
const { action } = useStateMachine(updateAction);
const onSubit = data => {
action(data);
props.history.push("./ProposalMethod");
};
const [valuesStudyType, setStudyType] = useState({
selectedOptionStudyType: []
});
const [valuesFundingBody, setFundingBody] = useState({
selectedOptionFundingBody: []
});
const handleMultiChangeStudyType = selectedOption => {
setValue("studyType", selectedOption);
setStudyType({ selectedOption });
};
const handleMultiChangeFundingBody = selectedOption => {
setValue("fundingBody", selectedOption);
setFundingBody({ selectedOption });
};
useEffect(() => {
register({ name: "studyType" });
register({name: "fundingBody"});
}, []);如何从数据库查询中添加快照？
我尝试为快照创建类似的handleMultiChange const和useEffect寄存器语句，如下所示：
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('abs_for_codes'),
snapshot.push({
value: snapshot.data().title.replace(/( )/g, ''),
label: snapshot.data().title + ' - ABS ' + snapshot.id
}),
);
const [valuesField, setField ] = useState({
selectedOptionField: []
});
const handleMultiChangeField = selectedOption => {
setValue("field", selectedOption);
setField({ selectedOption });
};但不起作用。错误消息说：
ReferenceError:无法在初始化前访问“快照”
我找不到如何用数据库中的数据填充select菜单的示例。
下一次尝试
useEffect(
() => {
const unsubscribe = firebase
.firestore()
.collection('abs_for_codes')
.onSnapshot(
snapshot => {
const fields = []
snapshot.forEach(doc => {
fields.push({
value: fields.data().title.replace(/( )/g, ''),
label: fields.data().title + ' - ABS ' + fields.id
})
})
setLoading(false)
setFields(fields)
},
err => {
setError(err)
}
)
return () => unsubscribe()
})这也不起作用--它会产生一条错误消息，上面写着：
TypeError: fields.data不是一个函数
下一次尝试
意识到我需要搜索集合而不是调用文档，但仍然不确定useCollectionData是否比useCollectionOnce更合适(我无法理解关于useCollectionData提供什么的文档)，我现在已经尝试了：
const [value, loading, error] = useCollectionOnce(
firebase.firestore().collection('abs_for_codes'),
{getOptions({
firebase.firestore.getOptions:
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id,
})},
);这也是不正确的。错误消息指向getOptions行，并指出:解析错误:意外令牌，预期"，
在我的收藏中，我有许多文件。每个属性都有两个属性，一个数字和一个文本字符串。我的选项是格式化数字和文本字符串，以便它们一起出现，以及我插入的缩略词(就像我使用componentDidMount时所做的那样)。
下一次尝试
接下来我尝试了这样的方法：
const fields = firebase.firestore.collection("abs_for_codes").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, ' => ', doc.data());
fields.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id
});
});
});错误消息是：_firebase__WEBPACK_IMPORTED_MODULE_5__.firebase.firestore.collection不是一个函数，TypeError：
NEXT ATTEPMT
const searchFieldOfResearchesOptions = (searchKey, resolver) => {
// for more info
// https://stackoverflow.com/questions/38618953/how-to-do-a-simple-search-in-string-in-firebase-database
// https://firebase.google.com/docs/database/rest/retrieve-data#range-queries
fsDB
.collection("abs_for_codes")
.orderBy("title")
// search by key
.startAt(searchKey)
.endAt(searchKey + "\uf8ff")
.onSnapshot(({ docs }) => {
// map data to react-select
resolver(
docs.map(doc => {
const { title } = doc.data();
return {
// value: doc.id,
// label: title
value: title.data().title.replace(/( )/g, ''),
label: title.data().title + ' - ABS ' + title.id
};
})
);
}, setFieldOfResearchesError);
};这种尝试实际上可以从数据库中检索数据(万岁)--但我无法获得想要呈现的文本标签。集合中的每个文档都有两个字段。第一个是标题，第二个是id号，我的最后一步是制作一个标签，它插入了文本(即ABS -)，然后将id号和标题放在一起。
我添加了注释代码，以显示提取每个文档标题的效果，但是我试图以我想要的方式使标签变得更好的地方并不会出现错误，它只是不起作用--我仍然只获得列表中的文档标题。
有没有人知道如何使用钩子从云端消防站集合中生成一组选择菜单选项？
回答 3
Stack Overflow用户
发布于 2019-11-14 22:11:13
从“react firebase-hooks/firestore”导入{ useDocument }；
为什么？您使用的是useDocumentOnce，当然您需要导入这个函数，而不需要导入不使用的useDocument。
最后一个错误:在初始化const之前就使用了const，因此
ReferenceError:无法在初始化前访问“快照”
快照将由useDocumentOnce初始化，您不能使用它(快照)作为传递给要初始化它的函数的参数。
此外，我还查看了react firebase-hooks，这里是useDocumentOnce的文档：
使用这示例，并对其进行修改以使用您想要使用的文档。
import { useDocument } from 'react-firebase-hooks/firestore';
const FirestoreDocument = () => {
const [value, loading, error] = useDocument(
firebase.firestore().doc('hooks/nBShXiRGFAhuiPfBaGpt'),
{
snapshotListenOptions: { includeMetadataChanges: true },
}
);
return (
<div>
<p>
{error && <strong>Error: {JSON.stringify(error)}</strong>}
{loading && <span>Document: Loading...</span>}
{value && <span>Document: {JSON.stringify(value.data())}</span>}
</p>
</div>
);
};您可以像在示例中一样使用useDocument，但也可以选择使用useDocumentOnce。但是在本例中，相应地更改导入(改为import { useDocumentOnce } from 'react-firebase-hooks/firestore'; )
Stack Overflow用户
发布于 2019-11-18 08:40:00
这里有不止一个问题。看看这个有用吗。
这会产生一个错误，即：“useDocumentOnce”未定义
import { useDocumentOnce } from 'react-firebase-hooks/firestore';
如果您像DOCs说的那样导入它，并且得到了这个错误，我会说您的dev环境有问题。尝试使用不同的代码编辑器，甚至使用不同的PC。--如果您像您说的那样正确地导入了它，那么代码中没有什么问题，您不应该得到这个错误。这不是代码中的一个bug .
请参阅useCollection和useDocumentOnce的文档(它们非常相似)：
现在看看你在做什么
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('abs_for_codes'),
{snapshot.push({
value: doc.data().title.replace(/( )/g, ''),
label: doc.data().title + ' - ABS ' + doc.id,
})},
);您没有为useDocumentOnce函数发送正确的参数。它需要一个文档引用和一个options对象。您将向collection参数发送一个options引用和一堆其他代码。
您的代码应该如下所示：
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('abs_for_codes').doc('someDocID')
);或
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('abs_for_codes').where('someProperty','==','someValue')
);注意，我没有包含options参数，因为它是可选的。如果你需要一些特定的选择，就把它发送出去。
使用useDocumentOnce钩子组件应该是什么样子的。
import { useDocumentOnce } from 'react-firebase-hooks/firestore';
const FirestoreDocument = () => {
const [snapshot, loading, error] = useDocumentOnce(
firebase.firestore().collection('someCollection').doc('someDocID'),
{
snapshotListenOptions: { includeMetadataChanges: true },
}
);
return (
<div>
<p>
{error && <strong>Error: {JSON.stringify(error)}</strong>}
{loading && <span>Document: Loading...</span>}
{snapshot && (
<span>
Document: {JSON.stringify(snapshot.data()}
</span>
)}
</p>
</div>
);
};Stack Overflow用户
发布于 2021-01-19 17:52:41
我相信你已经做过了，不过以防万一.您是否使用终端命令npm install --save react-firebase-hooks在项目中安装了react firebase-挂钩依赖项？如果您还没有安装依赖项，这可以解释消息useDocumentOnce is not defined。这是到安装文件的链接。以前，当我忘记安装软件包或依赖项时，我就收到了这条消息，这就是为什么您的错误消息让我想到了这一点。
https://stackoverflow.com/questions/58813897
复制相似问题
腾讯云开发者
