Как я могу положить эти данные в html?

Question

Я программист-самоучка / программист, работающий в режиме реального времени, пробующий FireSase FireStore.

Когда я пытаюсь это сделать:

 var docRef = db.collection("Marcus").doc("one")

    docRef.get().then(function(doc) {
        if (doc.exists) {
            console.log("Document data:", doc.data());

this.setState({
    test: doc.data()
});
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
    }).catch(function(error) {
        console.log("Error getting document:", error);
    }); 

, это работает отлично. Нет ошибки, документ находится в консоли.

, но когда я пытаюсь добавить его к вводу

class LatestNews extends Component {
    constructor(props) {
        super(props)

        this.state = {
            test: "input"
            }
        }

    componentDidMount() {
        docRef.get().then(function(doc) {
            if (doc.exists) {
this.setState({
    test: doc.data()
});    

        } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        }).catch(function(error) {
            console.log("Error getting document:", error);
        });
    }

    componentDidUpdate() {     
        docRef.get().then(function(doc) {


               if (doc.exists) {
this.setState({
    test: doc.data()
});                } else {
                    // doc.data() will be undefined in this case


        console.log("No such document!");
            }
    }).catch(function(error) {
        console.log("Error getting document:", error);
    });
}

render() {
    return (
        <div> <br/><br/>
        <h1 className={Style.blue}>sup</h1>  

        <h1>{this.state.test}<News/>   </h1>

, он не работает. Если я делаю это в виде списка, маркеры появляются для количества документов в коллекции, но ни один из документов не появляется.

проблема, я думаю, связана либо с частью "state.test", либо с чем-то, что связано с форматом firestore, который нелегко перенести в HTML.

результаты консоли:

при передаче в консоль: Данные документа: {Lnews: "это работает?"} Lnews: "это работает?" proto : Объект

при попытке установить состояние с тем, что находится в get:

Ошибка при получении документа: TypeError: Невозможно прочитать свойство 'setState' undefined в LatestNews .jsx: 68

Answer 1

Проблема с вашим фрагментом кода в том, что вы напрямую изменяете состояние. рендеринг не будет вызываться, если вы напрямую изменяете состояние.

Исправить просто, измените строку:

 this.state.test = doc.data();

на

this.setState({
    test: doc.data()
});

Answer 2

используйте this.setState () для обновления значения состояния

this.setState({
    test: doc.data()
});