![](/img/trans.png)
[英]Can't load firestore document data to variable in React-Native
[英]Can't capture the fields of a firestore document with React
我从 React 的 Firestore 文档中查询了一个特定字段,但我似乎无法将值本身捕获为字符串。 每次我 console.log 时,我都会返回 promise,但我不确定如何隔离从该 promise 返回的字符串。 代码和数据库如下。
import React from 'react';
import styled from 'styled-components';
import { firestore } from '../../firebase/firebase.utils';
const name = firestore.collection('blog-categories').doc('8uVaHd22tT5oXSzpOOuj').get().then(doc =>
doc.get('name'));
class Economics extends React.Component {
constructor() {
super();
this.state = {
name: name
}
}
render() {
console.log(this.state.name);
return (
<div>
{/* { this.state.name } */ }
</div>
)
}
}
export default Economics;
从 firestore 获取文档是一个异步操作。 当您在构造函数中设置名称时,promise 尚未解析,并且您直接传递 promise 而不是传递已解析的值。 相反,您可以在 componentdidmount 中调用 promise,您可以使用 setstate 设置值。
import React from 'react';
import styled from 'styled-components';
import { firestore } from '../../firebase/firebase.utils';
class Economics extends React.Component {
constructor() {
super();
this.state = {
name: ''
}
}
componentDidMount(){
firestore.collection('blog-categories').doc('8uVaHd22tT5oXSzpOOuj').get().then(doc => {
this.setState({ name: doc.get('name') });
});
}
render() {
console.log(this.state.name);
return (
<div>
{/* { this.state.name } */ }
</div>
)
}
}
export default Economics;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.