无法使用 React 捕获 Firestore 文档的字段答案

【问题标题】：Can't capture the fields of a firestore document with React无法使用 React 捕获 Firestore 文档的字段
【发布时间】：2020-06-25 10:33:04
【问题描述】：

我从 React 的 Firestore 文档中查询了一个特定字段，但我似乎无法将值本身捕获为字符串。每次我 console.log 时，我都会收到一个承诺，但我不确定如何隔离从该承诺返回的字符串。代码和数据库如下。

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;

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

从 firestore 获取文档是一个异步操作。当您在构造函数中设置 name 时，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;

【讨论】：