getElementByID + .appendhild () [TypeError: Falha para executar 'appendChild' em 'nó': parâmetro 1 não é do tipo 'nó'.]

votos
0

Eu tenho meu costume chamada componente 'Artigo', e eu tento mostrar meus artigos, wich é sotck no meu db, com a minha componente artigo.

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 eu executá-lo, o console retorno me TypeError: Falhou a execução do 'appendChild' on 'nó': parâmetro 1 não é do tipo 'nó'.

Estou bloco ...

Publicado 14/02/2020 em 00:04
fonte usuário
Em outras línguas...                            


2 respostas

votos
0

Use Element.insertAdjecentHTMLpara inserir uma string como HTML. O primeiro parâmetro é a posição onde adicionar o código HTML. O segundo parâmetro é o HTML para inserir.

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

Mas desde que você está usando Reagir você deve fazê-lo de forma diferente. Pelo que tenho encontrado você deve usar a ReactDOM.renderfunção para tornar um componente on the fly e inseri-lo no 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'));
}

Certifique-se de importar o ReactDOMmódulo para usá-lo corretamente. Coloque a importação no topo do seu script.

import ReactDOM from 'react-dom'
Respondeu 14/02/2020 em 00:15
fonte usuário

votos
1

AS @Calvin Nunes disse que você precisa para passar um nó document.createElement (), mas como você marcou reactjs talvez você poderia usar alguns conselhos sobre isso também.

Em reagir da maneira que temos de processar dados que vem de forma assíncrona (por exemplo, os documentos que você está recebendo a partir de seu DB) é acompanhar-los para o estado do componente.

Em um primeiro momento em que tornam nulo ou algum indicador de carga e disparar o pedido para obter os nossos dados. Quando os dados são carregados vamos definir nosso estado e devido a que o nosso componente rerender um que pode render o que está no estado.

Se você estiver usando um componente com ciclos de vida de seu código seria como:

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 você estiver usando uma função com ganchos seu código seria como:

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;

Você provavelmente terá que memoize o objeto db muito a fim de executar os ganchos useEffect apenas uma vez, mas isso não é o ponto aqui.

Respondeu 14/02/2020 em 00:34
fonte usuário

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