getElementByID + .appendhild () [TypeError: impossibile eseguire 'appendChild' su 'nodo': parametro 1 non è di tipo 'Node'.]

voti
0

Ho il mio personalizzato chiamata componente 'articolo', e cerco di mostrare i miei articoli, che dista sotck nel mio db, con la mia componente articolo.

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

Quando l'eseguo, la console di ritorno mi TypeError: Impossibile eseguire 'appendChild' sul 'nodo': parametro 1 non è di tipo 'nodo'.

Sono blocco ...

È pubblicato 13/02/2020 alle 22:04
fonte dall'utente
In altre lingue...                            


2 risposte

voti
0

Utilizzare Element.insertAdjecentHTMLper inserire una stringa come HTML. Il primo parametro è la posizione dove aggiungere il codice HTML. Il secondo parametro è il codice HTML da inserire.

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

Ma dal momento che si sta utilizzando Reagire si dovrebbe fare in modo diverso. Da quello che ho trovato si dovrebbe utilizzare la ReactDOM.renderfunzione per il rendering di un componente al volo e inserirla nel 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'));
}

Assicurarsi di importare il ReactDOMmodulo da utilizzare in modo corretto. Posizionare l'importazione nella parte superiore dello script.

import ReactDOM from 'react-dom'
Risposto il 13/02/2020 a 22:15
fonte dall'utente

voti
1

AS @Calvin Nunes ha detto è necessario passare un nodo a document.createElement (), ma come si contrassegnati reactjs forse si potrebbe usare qualche consiglio su di esso troppo.

In Reagire il modo che abbiamo per il rendering dei dati che viene in modo asincrono (ad esempio, i documenti che si stanno ottenendo dal vostro DB) è quello di seguirli nello stato del componente.

In un primo momento ci rendiamo nullo o di qualche indicatore di caricamento e fuoco la richiesta per ottenere i nostri dati. Quando viene caricato i dati abbiamo impostato il nostro stato e causa di che la nostra componente rerender un noi possiamo rendere ciò che si trova nello stato.

Se si utilizza un componente con cicli di vita il codice sarebbe come:

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;

Se si utilizza una funzione con ganci il codice sarebbe come:

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;

Probabilmente avrete bisogno di Memoize l'oggetto db troppo al fine di eseguire i ganci useEffect solo una volta, ma questo non è il punto qui.

Risposto il 13/02/2020 a 22:34
fonte dall'utente

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