getElementByID + .appendhild () [Typeerror: Fehler beim 'appendChild' auf 'Knoten' auszuführen: Parameter 1 ist nicht vom Typ 'Knoten'.]

stimmen
0

Ich habe meinen eigenen Komponente Aufruf ‚Artikel‘, und ich versuche, meine Artikel zu zeigen, Weicht sotck in meinem db ist, mit meiner Komponente Artikeln.

function renderArticle(doc){
    var article = '<Article name=' + doc.data().name + ' content=' + doc.data().content + ' id=' + doc.data().id + '/>'
    document.getElementById('articles-list').appendChild(article)

}
 
const db = firebase.firestore()
db.collection('articles').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
      renderArticle(doc)
    })
  })

Wenn ich es laufen, die Konsole Rückkehr mich Typeerror: Fehler ‚appendChild‘ auf ‚Knoten‘ auszuführen: Parameter 1 ist nicht vom Typ ‚Knoten‘.

Im Block...

Veröffentlicht am 14/02/2020 um 00:04
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
0

Verwenden Sie Element.insertAdjecentHTMLeine Zeichenfolge als HTML einfügen. Der erste Parameter ist die Position , wo die HTML hinzuzufügen. Der zweite Parameter ist der HTML - Code einzufügen.

function renderArticle(doc){
    var article = '<Article name="' + doc.data().name + '" content="' + doc.data().content + '" id="' + doc.data().id + '"/>';
    document.getElementById('articles-list').insertAdjacentHTML('beforeend', article);
}

Aber da Sie verwenden Reagieren Sie sollte es anders machen. Von dem, was ich gefunden habe , sollten Sie die Verwendung ReactDOM.renderFunktion eine Komponente im Fluge zu machen und in den DOM einfügen.

function renderArticle(doc){
  var article = '<Article name="' + doc.data().name + '" content="' + doc.data().content + '" id="' + doc.data().id + '"/>';
  ReactDOM.render(article, document.getElementById('articles-list'));
}

Achten Sie auf die zu importierende ReactDOMModul , um es richtig zu verwenden. Platzieren Sie den Import am Anfang des Skripts.

import ReactDOM from 'react-dom'
Beantwortet am 14/02/2020 um 00:15
quelle vom benutzer

stimmen
1

AS @Calvin Nunes gesagt, Sie brauchen einen Knoten zu document.createElement () übergeben, aber wie Sie reactjs getaggt vielleicht könnten Sie ein paar Ratschläge darüber verwenden.

Reagieren Sie in der Art, wie wir müssen Daten übertragen, die asynchron kommt (zB die Dokumentation, dass Sie von Ihrem DB bekommen) ist sie in den Komponentenstatus zu verfolgen.

In einem ersten Moment, wo wir null oder eine Ladeanzeige machen und die Anforderung Feuer auf unsere Daten. Wenn die Daten geladen werden wir unser Zustand und aufgrund dessen, dass unsere Komponente rerender eine können wir machen, was in dem Zustand befindet.

Wenn Sie eine Komponente mit Lifecycles Code verwenden würde wie:

import React, {Component} from 'react';

class ArticleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      docs: null,
    };
  }

  componentDidMount() {
    db.collection('articles').get().then((snapshot) => {
      this.setState({docs: snapshot.docs});
    })
  }

  render() {
    if (docs === null) return null;
    return (
      <div>
        {docs.map((doc) => {
          return (
            <Article
              content={doc.data().content}
              key={doc.data().id}
              id={doc.data().id}
              name={doc.data().name}
            />
          );
        })}
      </div>
    );
  }
}

export default ArticleList;

Wenn Sie eine Funktion mit Haken Code verwenden würde wie:

import React, {useEffect, useState} from 'react';
import Article from './Article'; // your other component

function ArticleList () {
  const [docs, setDocs] = useState(null);
  const db = firebase.firestore();
  useEffect(() => {
    db.collection('articles').get().then((snapshot) => {
      setDocs(snapshot.docs);
    })
  }, [db, setDocs]);
  if (docs === null) return null;
  return (
    <div>
      {docs.map((doc) => {
        return (
          <Article
            content={doc.data().content}
            key={doc.data().id}
            id={doc.data().id}
            name={doc.data().name}
          />
        );
      })}
    </div>
  );
}

export default ArticleList;

Sie werden wahrscheinlich das DB-Objekt zu, um die useEffect Haken laufen nur einmal, aber das ist nicht der Punkt hier memoize müssen.

Beantwortet am 14/02/2020 um 00:34
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more