getElementById + .appendhild () [TypeError: Error al ejecutar 'appendChild' on 'nodo': parámetro 1 no es del tipo 'nodo'.]

votos
0

Tengo mi costumbre llamada componente 'Artículo', y yo trato de mostrar mis artículos, cosa que está sotck en mi db, con mi componente artículo.

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

Cuando lo ejecuto, la consola de retorno me TypeError: Error al ejecutar 'appendChild' en 'nodo': el parámetro 1 no es del tipo 'nodo'.

Estoy bloque ...

Publicado el 14/02/2020 a las 00:04
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

Utilizar Element.insertAdjecentHTMLpara insertar una cadena como HTML. El primer parámetro es la posición en la que añadir el código HTML. El segundo parámetro es el HTML para insertar.

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

Sin embargo, dado que está utilizando Reaccionar que debe hacer de manera diferente. De lo que he encontrado se debe utilizar la ReactDOM.renderfunción para rendir un componente sobre la marcha y la inserta en el 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'));
}

Asegúrese de importar el ReactDOMmódulo de utilizarlo correctamente. Coloque la importación en la parte superior de su script.

import ReactDOM from 'react-dom'
Respondida el 14/02/2020 a las 00:15
fuente por usuario

votos
1

AS @Calvin Nunes dijo que necesita para pasar de un nodo a document.createElement (), pero a medida que reactjs etiquetado tal vez usted podría utilizar algunos consejos sobre él también.

En reaccionar de la manera que tenemos que hacer que los datos que vienen de forma asíncrona (por ejemplo, los documentos que usted está recibiendo de su base de datos) es realizar un seguimiento de ellos en el estado de los componentes.

En un primer momento rendimos nulo o algún indicador de carga y fuego la solicitud para obtener nuestros datos. Cuando se cargan los datos establecimos nuestro estado y debido a que nuestro componente se regenere una que puede hacer que lo que está en el estado.

Si está utilizando un componente con ciclos de vida de su código sería:

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;

Si está utilizando una función con ganchos su código sería:

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;

Es probable que necesite memoize el objeto db demasiado para poder ejecutar los ganchos useEffect sólo una vez, pero esto no es el punto aquí.

Respondida el 14/02/2020 a las 00:34
fuente por usuario

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