G's days

무한스크롤구현-JSON파일 불러오기 오류 본문

카테고리 없음

무한스크롤구현-JSON파일 불러오기 오류

Hi☆G 2021. 9. 6. 19:34

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

 

    const productsContainer = document.querySelector('.product-container');
    const loading = document.querySelector('.loader');

    // let limit = 5;
    let page = 1;

    async function getProducts() {
        const res = await fetch('https://Ji-Yeon0107.github.io/shopping/productList.json')
        const data = await res.json();
        console.log(data);
        return res;
    };
    async function showProducts() {
        const products = await getProducts();

        products.forEach((productItem)=>{
            const productEl=document.createElement('li');
            productEl.classList.add('product-item');
            productEl.innerHTML = `
                <h4>{productItem.title}</h4>
                <p>{productItem.content}<br/>
                {productItem.price} 원</p>
            `;
            productsContainer.appendChild(productEl)
        });  
    }
    function showLoading() {
        loading.classList.add('show');
      
        setTimeout(() => {
          loading.classList.remove('show');
      
          setTimeout(() => {
            page++;
            showProducts();
          }, 300);
        }, 1000);
      }