getElementByID + .appendhild () [लेखन त्रुटि: निष्पादित करने के लिए 'नोड' चालू 'appendChild' में विफल: पैरामीटर 1 नहीं प्रकार का है 'नोड'।]

वोट
0

मैं अपने कस्टम घटक कॉल 'अनुच्छेद' है, और मैं अपने लेख, जो मेरी DB में sotck है, मेरे घटक अनुच्छेद साथ दिखाने के लिए प्रयास करें।

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

जब मैंने इसे चलाने के लिए, कंसोल वापसी मुझे लेखन त्रुटि: निष्पादित करने के लिए 'नोड' चालू 'appendChild' में विफल: पैरामीटर 1 प्रकार 'नोड' की नहीं है।

मैं ब्लॉक हूँ ...

13/02/2020 को 22:04
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
0

का प्रयोग करें Element.insertAdjecentHTMLHTML के रूप में एक स्ट्रिंग डालने के लिए। पहले पैरामीटर स्थिति जहां एचटीएमएल जोड़ना है। दूसरा पैरामीटर एचटीएमएल डालने के लिए है।

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तुरंत एक घटक प्रस्तुत करना और डोम में डालने के लिए कार्य करते हैं।

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'
13/02/2020 को 22:15
का स्रोत उपयोगकर्ता

वोट
1

के रूप में @Calvin Nunes कहा कि तुम document.createElement () के लिए एक नोड उत्तीर्ण करने की आवश्यकता है, लेकिन जैसा कि आप reactjs में चिह्नित हो सकता है आप भी इसके बारे में कुछ सलाह इस्तेमाल कर सकते हैं।

जिस तरह से हम डेटा प्रस्तुत करने के लिए है प्रतिक्रिया है कि अतुल्यकालिक रूप से आता है (उदाहरण के लिए डॉक्स है कि आप अपने डीबी से हो रही है) में उन्हें घटक राज्य में ट्रैक करने के लिए है।

पहली बार एक पल में हम अशक्त या कुछ लोड हो रहा है सूचक प्रस्तुत करना और हमारे डेटा प्राप्त करने के लिए अनुरोध आग। जब डेटा लोड किया जाता है हम करने के लिए है कि हमारे घटक rerender एक हम प्रदान कर सकते हैं क्या राज्य में है जाएगा हमारे राज्य और वजह से निर्धारित किया है।

अपने कोड आप lifecycles के साथ एक घटक उपयोग कर रहे हैं की तरह होगा:

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;

आप शायद आदेश सिर्फ एक बार useEffect हुक को चलाने के लिए भी डाटाबेस वस्तु memoize करने की आवश्यकता होगी, लेकिन यह यहां मुद्दा यह नहीं है।

13/02/2020 को 22:34
का स्रोत उपयोगकर्ता

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