Problem z wyświetlaniem danych za pomocą map.

0

Dzień dobry,
mam taki problem że podczas wyświetlania danych za pomocą ,tablica" pojawia mi się taki komunikat:

podsumowanie.js:16 Uncaught TypeError: tablica.map is not a function
    at Podsumowanie (podsumowanie.js:16:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)

Oto krótki opis:

za pomocą pliku rachunek_stankasy.php pobierane są dane z bazy MYSQL i wysyłane do polecenia fetch w postaci JSON.

rachunek_stankasy.php:
......
if(isset($_GET['stan_kasy']))
{
  $wysylka = array("stan_rachunku"=>Stan_kasy(),"suma_wplat"=>Sumowanie_wplat(),"suma_wyplat"=>Sumowanie_wyplat());
  echo  json_encode( $wysylka,JSON_UNESCAPED_SLASHES);

}

Pobieranie danych z pliku rachunek_stankasy,php:

  useEffect(() => {  
        fetch('http://localhost:8080/baza/rachunek_stankasy.php?stan_kasy')
        .then((response) => response.json())
        .then((data) => settablica(data)); 
    },[props.wyswietl]);
.....
return (
<>
{tablica.map((dane) => (
    <div >Aktualne saldo:<b> {dane.suma_wplat} PLN.</b></div>
   ))}
 </>

Dane przesłane pomiędzy dwoma powyższymi plikami mają postać:
screenshot-20230412150051.png

1
Uncaught TypeError: tablica.map is not a function

popatrz: tablica.map is not a function. Ponieważ tablice w JS zawierają funkcję .map, to znaczy, że zmienna tablica nie jest tablicą (ale nie jest też undefined ani null, bo by był inny błąd). Czyli przypisujesz do tablicy coś innego, zapewne obiekt.

I faktycznie, na screenie masz obiekt BTW co jest na tym screenie ze stan_rachunku: -27349.2200000 itp.? Czy zrobiłeś console.log na zmiennej tablica?

Zobaczyłbym, co tu masz:

 .then((data) => settablica(data)); 

Co zawiera zmienna data? Czy na pewno tablicę, czy właśnie ten obiekt?

Jeśli to obiekt, to pewnie w kodzie PHP dajesz obiekt, a nie tablicę. I faktycznie. Przecież zobacz co piszesz. Generujesz samemu obiekt w JSON, a nie tablicę (bo tablica asocjacyjna się wyrenderuje do obiektu w JSON):

  $wysylka = array("stan_rachunku"=>Stan_kasy(),"suma_wplat"=>Sumowanie_wplat(),"suma_wyplat"=>Sumowanie_wyplat())
  echo  json_encode( $wysylka,JSON_UNESCAPED_SLASHES);

Możesz owinąć array("stan_rachunku"=>Stan_kasy(),"suma_wplat"=>Sumowanie_wplat(),"suma_wyplat"=>Sumowanie_wyplat()) w jeszcze jedno array, żeby zwracać w JSON jednoelementowy array z obiektem w środku, jeśli taka jest twoja intencja (ale jeśli ma być tylko jeden element, to pytanie - po co na frontendzie zakładać, że to tablica? Czy to może być tablicą?).

2
array(array("stan_rachunku"=>Stan_kasy(),"suma_wplat"=>Sumowanie_wplat(),"suma_wyplat"=>Sumowanie_wyplat()));
0
dzek69 napisał(a):
array(array("stan_rachunku"=>Stan_kasy(),"suma_wplat"=>Sumowanie_wplat(),"suma_wyplat"=>Sumowanie_wyplat()));

Mój kod w php wygląda teraz tak:

if(isset($_GET['stan_kasy']))
{
  $wysylka = array((array("stan_rachunku"=>Stan_kasy(),"suma_wplat"=>Sumowanie_wplat(),"suma_wyplat"=>Sumowanie_wyplat())));
  echo   $wysylka;

}

Teraz jak chce wyświetlić dane bezpośrednio z linku: http://localhost:8080/baza/rachunek_stankasy.php?stan_kasy to otrzymuje błąd:

Notice: Array to string conversion in E:\xampp\htdocs\baza\rachunek_stankasy.php on line 50
Array

UPDATE:
wcześniej zapomniałem o json_encode.
echo json_encode($wysylka); zaraz sprawdzę czy działa na frontedzie
UPDATE:
Działa wszystko dzięki wielkie :)
screenshot-20230412223923.png

1 użytkowników online, w tym zalogowanych: 0, gości: 1