getElementByID + .appendhild () [TypeError: Impossible d'exécuter 'appendChild' on 'Node': paramètre 1 ne soit pas du type 'nœud'.]

voix
0

J'ai mon habitude appel composant « article », et je tente de montrer mes articles, Wich est sotck dans ma db, avec mon article composant.

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)
    })
  })

Quand je le lance, la console de retour me TypeError: Impossible d'exécuter « appendChild » sur « Node »: paramètre 1 est pas de type « nœud ».

Je suis bloc ...

Créé 14/02/2020 à 00:04
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
0

Utilisez Element.insertAdjecentHTMLpour insérer une chaîne en HTML. Le premier paramètre est la position où ajouter le code HTML. Le deuxième paramètre est le code HTML à insérer.

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);
}

Mais puisque vous utilisez React vous devriez le faire différemment. D'après ce que j'ai trouvé , vous devez utiliser la ReactDOM.renderfonction de rendre un composant à la volée et l' insérer dans les DOM.

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'));
}

Assurez - vous d'importer le ReactDOMmodule pour l' utiliser correctement. Placez l'importation en haut de votre script.

import ReactDOM from 'react-dom'
Créé 14/02/2020 à 00:15
source utilisateur

voix
1

AS @Calvin Nunes a dit que vous devez passer un nœud à document.createElement (), mais comme vous avez marqué reactjs vous pourriez peut-être utiliser quelques conseils à ce sujet aussi.

En React la façon dont nous devons rendre des données qui vient de manière asynchrone (par exemple les documents que vous obtenez de votre DB) est de les suivre dans l'état du composant.

Dans un premier moment, nous rendions nul ou un indicateur de chargement et le feu de la demande pour obtenir nos données. Lorsque les données que nous fixons notre état est chargé et en raison de que notre composante rerender un, nous pouvons faire de ce qui est dans l'état.

Si vous utilisez un composant avec votre code serait cycles de vie ressembler:

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;

Si vous utilisez une fonction avec des crochets votre code serait comme:

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;

Vous devrez probablement memoize l'objet db trop pour exécuter les crochets useEffect juste une fois, mais ce n'est pas le point ici.

Créé 14/02/2020 à 00:34
source utilisateur

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