документ не определен для document.querySelector

Question

Я пытаюсь отобразить данные из моей серверной части Firebase на свой веб-сайт. У меня есть функция в ../components/Storefront.js

function Storefront(props) {
return (
<section>
<ul className="service-list"></ul>
</section>
}

В другом файле ../pages/storefront.js я пытаюсь отобразить функцию в "service -list ",

import Storefront from './../components/Storefront';
const servicelist = document.querySelector('.service-list');

function renderServices(doc){
  let li = document.createElement('li');
  let name = document.createElement('span');
  let description = document.createElement('span');

  li.setAttribute('data-id', doc.id);
  name.textContent = doc.data().name;
  description.textContent = doc.data().description;

  li.appendChild(name);
  li.appendChild(description);

  servicelist.appendChild(li);
}

Однако я продолжаю получать сообщение об ошибке, указывающее на мой

const servicelist = document.querySelector('.service-list');

. Я пробовал делать ('# service-list'), который не делает ' т помочь. Это потому, что querySelector не работает с JSX и работает только с HTML? Будем признательны за любые советы!

Answer 1

Я считаю, что проблема в том, что ваша строка const servicelist = document.querySelector... находится в области видимости файла, что означает, что она запускается немедленно , когда файл загружен, а это слишком рано, потому что DOM не загружен. Попробуйте изменить первую часть кода следующим образом.

import Storefront from './../components/Storefront';
let servicelist;

function init() {
    console.log("Initializing");
    servicelist = document.querySelector('.service-list');
    // anything else you want to do on initialize
}

window.onload = init;

// The rest as you have it already.

Вот хорошее вступление: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload