getElementByID + .appendhild () [Ошибка типа: Не удалось выполнить 'AppendChild' на 'Node': Параметр 1 не типа 'узел'.]

голоса
0

У меня есть пользовательский компонент вызова «статьи», и я стараюсь, чтобы показать мои статьи, которым является 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)
    })
  })

Когда я запускаю его, консоль вернуть мне TypeError: Не удалось выполнить «AppendChild» на «Node»: Параметр 1 не типа «узел».

Я блок ...

Задан 14/02/2020 в 00:04
источник пользователем
На других языках...                            


2 ответов

голоса
0

Используйте , Element.insertAdjecentHTMLчтобы вставить строку в 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 Нуньесы сказали, что вы должны передать в узел document.createElement (), но, как вы помечены reactjs может быть, вы могли бы использовать некоторые советы по этому поводу тоже.

В React пути мы должны визуализировать данные, что приходит асинхронно (например, документы, которые вы получаете от вашей БД), чтобы отслеживать их в состояние компонента.

В первый момент мы предоставляем нуль или некоторый индикатор загрузки и огнь запроса, чтобы получить наши данные. При загрузке данных мы устанавливаем наше состояние и благодаря тому, что наш компонент засавить мы можем оказать, что находится в состоянии.

Если вы используете компонент с жизненными циклами ваш код будет, как:

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 объект дб тоже для того, чтобы запустить 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