getElementById + .appendhild () [TypeError: Nepodařilo se příkaz 'appendChild' na 'uzlu': parametr 1 není typu 'uzel'.]

hlasů
0

Mám svou vlastní konstrukční výzvu ‚článek‘, a já se pokusím ukázat mé články, Wich je sotck v mém db, s mou složkou článku.

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

Když jsem jej spustit konzola návrat me TypeError: Nepodařilo se spustit ‚appendChild‘ na ‚uzlu‘: parametr 1 není typu ‚Node‘.

Jsem blok ...

Položena 14/02/2020 v 00:04
zdroj uživatelem
V jiných jazycích...                            


2 odpovědí

hlasů
0

Použijte Element.insertAdjecentHTMLpro vložení řetězec jako HTML. Prvním parametrem je pozice, kde přidat HTML. Druhým parametrem je HTML vložit.

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

Ale vzhledem k tomu, že používáte Reagovat si to měli dělat jinak. Z toho, co jsem zjistil, byste měli používat ReactDOM.renderfunkci k vykreslení komponent za chodu a vložte ji do 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'));
}

Ujistěte se, že import ReactDOMmodul ji správně používat. Umístěte dovoz v horní části skriptu.

import ReactDOM from 'react-dom'
Odpovězeno 14/02/2020 v 00:15
zdroj uživatelem

hlasů
1

AS @Calvin Nunes řekl, je třeba předat uzel document.createElement (), ale jak jste označili reactjs možná byste mohli použít nějaké rady o tom taky.

V Reagovat cestu, kterou máme k tomu, aby data, která přichází asynchronně (například dokumenty, které jste získali od svého DB) je sledovat je do stavu komponent.

V první chvíli jsme vykreslit null nebo nějaký ukazatel načítání a oheň požadavek získat naše data. Po načtení dat můžeme nastavit náš stát a díky, že naše komponenta rerender můžeme učinit to, co je ve stavu.

Pokud používáte komponentu s životním cyklem váš kód bude vypadat:

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;

Pokud používáte funkci s háčky váš kód bude vypadat:

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;

Pravděpodobně budete muset memoize objekt db příliš, aby běžel na useEffect háčky jen jednou, ale to není tento bod zde.

Odpovězeno 14/02/2020 v 00:34
zdroj uživatelem

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