javascript - 无法使用 React 捕获 Firestore 文档的字段

Question

我从 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;

标签： javascriptreactjsfirebasegoogle-cloud-firestore

Answer 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;