getElementByID + .appendhild () [Feiltype: kunne ikke kjøres 'appendChild' på 'Node': parameter 1, er av typen 'Node'.]

stemmer
0

Jeg har min egendefinert komponent anrop 'Artikkel', og jeg prøver å vise mine artikler, wich er sotck i min db, med min komponent artikkel.

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

Når jeg kjører den, konsollen avkastning meg Feiltype: Kunne ikke utføre 'appendChild' på 'Node': parameter 1 er ikke av typen 'Node'.

Jeg er blokk ...

Publisert på 13/02/2020 klokken 22:04
kilden bruker
På andre språk...                            


2 svar

stemmer
0

Bruk Element.insertAdjecentHTMLfor å sette inn en streng som HTML. Den første parameteren er den stilling hvor de skal legge til HTML. Den andre parameteren er HTML sette inn.

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

Men siden du bruker Reagerer du bør gjøre det annerledes. Fra hva jeg har funnet bør du bruke ReactDOM.renderfunksjonen til å gjengi en komponent på fly og sett den inn i 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'));
}

Sørg for å importere ReactDOMmodulen for å bruke det riktig. Plasser import på toppen av skriptet.

import ReactDOM from 'react-dom'
Svarte 13/02/2020 kl. 22:15
kilden bruker

stemmer
1

AS @Calvin Nunes sa du må passere en node til document.createElement (), men som du merket reactjs kanskje du kan bruke noen råd om det også.

I reagere slik vi har å gjengi data som kommer asynkront (f.eks docs som du får fra din DB) er å spore dem inn komponenten tilstand.

I en første øyeblikk gjengi vi null eller noen lasting indikator og brann anmodning om å få våre data. Når dataene er lastet vi setter vår stat og på grunn av at vår komponent skaleres en vi kan gjengi hva som er i staten.

Hvis du bruker en komponent med livssykluser koden ville være:

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;

Hvis du bruker en funksjon med kroker koden ville være:

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;

Du må sannsynligvis memoize den db gjenstand for for å kjøre useEffect kroker bare en gang, men dette er ikke poenget her.

Svarte 13/02/2020 kl. 22:34
kilden bruker

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