Question 390548 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – SetVariable showing empty array

I Have problem in react, I use fetch API from tutorial to get data from my API to show data on react, Here My JSON,

{
  "Konfigurasi": [
    {
      "id_konfigurasi": 1,
      "bahasa": "ID",
      "namaweb": "Universitas",
      "tagline": "home 2",
      "singkatan": "UBG",
      "id_user": 16,
      "periode_satu": "11 Desember 2023 s.d 30 April 2024 (Sudah Tutup)",
      "periode_dua": "1 Mei 2024 s.d 31 Juli 2024 (Sedang Dibuka)",
      "periode_tiga": "Belum Dibuka",
      "tanggal": "2023-05-10T02:44:44.000Z"
    }
  ]
}

And here my code.

const [configuration, setConfiguration] = useState([]);

async function getConfiguration(){  
const postData={
        method:"GET",
        headers:{"Content-Type":"application/json",}
    }

fetch(process.env.NEXT_PUBLIC_URL+'/api/Configuration',postData)
        .then(response => response.json())
        .then(data => setConfiguration(data))
        .catch(error => console.error(error));
}

useEffect(()=>{
    getConfiguration()
},[])

The Code was working, I try to console log the data it shows api array but when i try to send it to configuration, its show nothing, just empty array. It’s probably me missing something.

I try few tutorial and its not working, I want to put the JSON data into the Configuration variable, Is it from my code or i miss something ?
Thank You In Advance also I’am Sorry I’m not very good at English.

Tags:

2

Answers


  1. 0

    i think you should fetch the data inside the getConfiguration function, so just when invike it it returns the data and send it to configuation variable, try this solution and answer me back,

    Login or Signup to reply.
  2. 0 
    import { useState, useEffect } from 'react';

const [configuration, setConfiguration] = useState([]);

async function getConfiguration() {
    try {
        const response = await ``fetch(`${process.env.NEXT_PUBLIC_URL}/api/Configuration`, {
            method: "GET",
            headers: { "Content-Type": "application/json" }
        });

        if (!response.ok) {
            throw new Error(`Error: ${response.status}`);
        }

        const data = await response.json();
        setConfiguration(data);
    } catch (error) {
        console.error('Failed to fetch configuration:', error);
    }
}

useEffect(() => {
    getConfiguration();
}, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search