getElementById + .appendhild () [Típushiba: Nem sikerült végrehajtani 'AppendChild' on 'Node': 1. paraméter nem típusú 'Node'.]

szavazat
0

Megvannak a saját alkatrész hívás cikk , és azt próbálja megmutatni a cikkeimet, wich sotck én db, az én komponens cikk.

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

Amikor elindul, a konzol visszatérő nekem Típushiba: Nem sikerült végrehajtani a „AppendChild” on „Node”: 1-es paraméter nem típusú „Node”.

Én blokk ...

A kérdést 14/02/2020 00:04
a forrás felhasználó
Más nyelveken...                            


2 válasz

szavazat
0

Használja Element.insertAdjecentHTMLbe egy karakterláncot a HTML. Az első paraméter az a helyzet, ahol hozzá a HTML. A második paraméter a HTML beilleszteni.

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

De mivel ön használ reagál meg kell csinálni másképp. Abból, amit én találtam akkor használja a ReactDOM.renderfunkciót arra, hogy egy alkatrész menet közben, és helyezze be a 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'));
}

Győződjön meg arról, hogy importálja a ReactDOMmodul megfelelően használják. Helyezzük az import tetején a forgatókönyvet.

import ReactDOM from 'react-dom'
Válaszolt 14/02/2020 00:15
a forrás felhasználó

szavazat
1

AS @Calvin Nunes azt mondta, át kell adni a Node document.createElement (), de ahogy címkézett reactjs talán jól jönne néhány tanácsot is erről.

Az reagálnak, ahogy azt kell tenni az adatok, ami aszinkron (pl docs, hogy egyre saját DB), hogy követni őket a komponens állam.

Az első pillanatban azt teszi null vagy valami betöltés jelző és tűz a kérést kap adatainkat. Amikor az adatok betöltése mi meg az állam és annak köszönhető, hogy a komponens rerender egy tudjuk tenni, hogy mi van az állam.

Ha ön használ egy komponens életciklusa a kód lenne, mint:

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;

Ha függvény segítségével horgokkal a kód lenne, mint:

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;

Valószínűleg kell memoize a db tárgy is ahhoz, hogy fusson a useEffect horgok csak egyszer, de ez nem az a lényeg itt.

Válaszolt 14/02/2020 00:34
a forrás felhasználó

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