getElementById + .appendhild () [TypeError: nu a reușit să execute 'appendChild' pe 'Nod': parametrul 1 nu este de tip 'Node'.]

voturi
0

Am meu de apel componentă „Articolul“, și încerc să arăt articolele mele, este sotck CARE în dB mea, cu componenta articolul meu.

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

Când am alerga, consola mi întoarcere TypeError: Nu a reușit să execute „appendChild“ pe „Nod“: parametrul 1 nu este de tipul „Node“.

Sunt bloc ...

Întrebat 14/02/2020 la 00:04
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
0

Utilizați Element.insertAdjecentHTMLpentru a introduce un șir de caractere ca HTML. Primul parametru este poziția în cazul în care pentru a adăuga HTML. Al doilea parametru este HTML pentru a insera.

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

Dar , din moment ce utilizați React ar trebui să o facă în mod diferit. Din ceea ce am găsit ar trebui să utilizați ReactDOM.renderfuncția pentru a face o componentă pe zbor și introduceți - l în 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'));
}

Asigurați - vă că pentru a importa ReactDOMmodulul să - l folosească în mod corespunzător. Se pune importul în partea de sus a script - ul.

import ReactDOM from 'react-dom'
Publicat 14/02/2020 la 00:15
sursa de către utilizator

voturi
1

AS @Calvin Nunes a spus că ai nevoie pentru a trece un nod la document.createElement (), dar te-a etichetat reactjs poate ai putea folosi un sfat despre asta.

În React modul în care trebuie să facă date care vine în mod asincron (de exemplu, docs pe care le primiți de la DB-ul) este de a le urmări în starea componentelor.

Într-un prim moment vom face nul sau un indicator de încărcare și de foc cererea pentru a obține datele noastre. Când este încărcat datele pe care le seta starea noastră și din cauza că componenta noastră va rerender o putem face ceea ce este în stare.

Dacă utilizați o componentă cu ciclul de viață al codului ar fi ca:

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;

Dacă utilizați o funcție cu cârlige codul ar fi ca:

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;

Veți avea nevoie, probabil, să memoize obiectul db prea, în scopul de a rula cârlige useEffect doar o dată, dar acest lucru nu este punctul de aici.

Publicat 14/02/2020 la 00:34
sursa de către utilizator

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