getElementByID + .appendhild () [TypeError: Αποτυχία εκτέλεσης 'appendChild' on 'Κόμβος': παράμετρος 1 δεν είναι του τύπου 'Κόμβος'.]

ψήφοι
0

Έχω έθιμο μου συνιστώσα κλήσης «αντικείμενο», και προσπαθώ να δείξει τα άρθρα μου, Άσκιο sotck σε db μου, με το συστατικό του άρθρου μου.

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

Όταν το τρέχω, η κονσόλα επιστροφή μου TypeError: Αποτυχία εκτέλεσης «appendChild» για την «Κόμβος»: παράμετρος 1 δεν είναι τύπου «Κόμβος».

Είμαι μπλοκ ...

Δημοσιεύθηκε 14/02/2020 στις 00:04
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
0

Χρησιμοποιήστε Element.insertAdjecentHTMLγια να εισάγετε ένα string ως HTML. Η πρώτη παράμετρος είναι η θέση όπου για να προσθέσετε το HTML. Η δεύτερη παράμετρος είναι το HTML για να εισάγετε.

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

Αλλά από τη στιγμή που χρησιμοποιείτε Αντιδρούν θα πρέπει να το κάνετε με διαφορετικό τρόπο. Από ό, τι έχω βρεθεί θα πρέπει να χρησιμοποιήσετε τη ReactDOM.renderλειτουργία για να καταστεί ένα στοιχείο σχετικά με τη μύγα και τοποθετήστε το στο 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'));
}

Φροντίστε να εισαγάγετε το ReactDOMενότητας για να το χρησιμοποιήσετε σωστά. Τοποθετήστε την εισαγωγή στην κορυφή του σεναρίου σας.

import ReactDOM from 'react-dom'
Απαντήθηκε 14/02/2020 στις 00:15
πηγή χρήστη

ψήφοι
1

AS @Calvin Nunes είπε θα πρέπει να περάσει μια Κόμβος για την document.createElement (), αλλά όπως μπορείτε ετικέτα reactjs ίσως θα μπορούσε να χρησιμοποιήσει κάποια συμβουλή γι 'αυτό πάρα πολύ.

Σε Αντιδρούν τον τρόπο με τον οποίο πρέπει να καταστήσει τα δεδομένα που έρχεται ασύγχρονα (π.χ. τα έγγραφα που παίρνετε από την DB σας) είναι να τα παρακολουθείτε στο συνιστώσα πολιτεία.

Σε μια πρώτη στιγμή που καθιστούν άκυρη ή κάποια ένδειξη φόρτωσης και φωτιά το αίτημα για να πάρει τα δεδομένα μας. Όταν φορτωθεί τα δεδομένα που θέσαμε κράτος και λόγω της τοποθεσίας μας και ότι η συνιστώσα μας θα rerender ένας που μπορεί να αποδώσει ό, τι είναι στην κατάσταση.

Εάν χρησιμοποιείτε μια συσκευή με τη διάρκεια ζωής κωδικό σας θα ήταν όπως:

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;

Εάν χρησιμοποιείτε μια συνάρτηση με άγκιστρα κωδικό σας θα ήταν όπως:

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;

Μάλλον θα πρέπει να memoize το αντικείμενο db πάρα πολύ για να τρέξει τα άγκιστρα useEffect μόνο μία φορά, αλλά αυτό δεν είναι το σημείο εδώ.

Απαντήθηκε 14/02/2020 στις 00:34
πηγή χρήστη

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