Basi c FireStore получить запрос проблемы на простом сайте Gatsby - PullRequest
Новая
       4

Basi c FireStore получить запрос проблемы на простом сайте Gatsby

1 голос
/ 28 марта 2020

Я создал простой запрос на получение, но я не уверен, что делать, поскольку он запросил ключ. Это уменьшенная версия моего кода: 

import React, { Component, useEffect } from 'react';
import firebase from "gatsby-plugin-firebase";

var db = firebase.firestore();

var word1 = db.collection("menue").doc("word1");

 class newMenue extends Component {


     constructor(props) {
         super(props)    
         this.state = {
              wordOne: "",            
         }
     }

    render() {

        word1.get()
        .then(doc => {
          if (!doc.exists) {
            console.log('No such document!');
          } else {
            console.log('Document data:', doc.data());
            this.setState({
                wordOne: doc.data()
            }) 
          }
        })
        .catch(err => {
          console.log('Error getting document', err);
        });


        return (
            <div>
                 <h2 >{this.state.wordOne}</h2>
                 <br/> 

                         <br/>
<h5>4 Slices of grilled Cypriot Halloumi</h5>
        </div>
        )

        }
    }

export default newMenue

это моя база данных: 

Document data: {One: "hi"}

Это то, что заявляет dev tools.

Ошибка : Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {One}). Если вы намеревались отобразить коллекцию дочерних элементов, используйте вместо этого массив.

Что мне сделать, чтобы добавить ключ для отображения информации?

В частности, я пытаюсь создать веб-сайт для бургера моего друга, где он может сам вносить изменения в меню на веб-сайте, и я застрял в этом последнем бите.

1 Ответ

3 голосов
/ 28 марта 2020

Вы пытаетесь отобразить объект:

<h2>{this.state.wordOne}</h2> // which is {One: "hi"}

Вам необходимо отобразить свойство объекта: 

<h2>{this.state.wordOne.One}</h2>
...