Çözüldü React Vite web uygulamasını ilk çalıştırmada boş sayfa sorunu

Genuine · 31 Aralık 2023

Merhabalar;

React Vite ile web sayfası oluşturdum fakat kodu ilk çalıştırmada boş sayfa geliyor. Yaptıklarımın sayfaya yansıması için ise uygulama çalışırken .jsx uzantılı dosya içerisinden yazdığım web sayfasında görünmesi gereken kodları silip, web sayfasında input'a eklemeler yaptıktan sonra sildiklerimi yeniden kod yerlerine eklemem gerekiyor.

İstediğim şey her çalıştırmamda input almayı ve yazdıklarıma göre sonucunu ekrana yazdırması. Boş ekran çıkmamasını istiyorum. CSS kısmı çalışıyor ama yukarıda dediğim sorun oluşuyor.

Kodu çalıştırdıktan sonra VSC terminalinde

warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
warn - Content Configuration - Tailwind CSS

Mesajı oluşuyor.

brkdnmz · 31 Aralık 2023

Anladığım kadarıyla boş sayfa değil de sadece input elementi görünüyor ama input'a bir şeyler yazdıkça ekranda bir yazı çıkmasını istiyorsunuz.

Direkt boş sayfa geliyorsa ama input'a bir şeyler yazdıktan sonra her şey istediğiniz gibi çalışıyorsa input boşken hatalı birtakım işlemler yapıyor olabilirsiniz. Bunun için tarayıcıda F12'ye basıp meydana gelen hataları (eğer varsa) görebilirsiniz.

Sayfanızın kodunu paylaşmanız mümkün mü? Bunun için lütfen öncelikle şu rehberi inceleyin: Rehber: Kod Nasıl Paylaşılır?

Konsolda aldığınız uyarıya bakılırsa büyük ihtimalle Tailwind'in sınıflarını kullanmıyorsunuz. Tahminimce konfigürasyonunuz doğrudur.

Genuine · 1 Ocak 2024

Durum aslında şöyle. Ben aşağıdaki verileri almak isterken <h1> etiketine sahip olan satırları siliyorum input alanı geliyor. İnput alanına yazmak istediğim şehri yazdıktan sonra <h1> etiketlerini tekrar yerlerine yazınca ancak o şekilde çalışıyor. Sayfayı yenileyince sayfa boş oluyor.

[CODE lang="javascript" title="City.jsx"]import React from 'react'

const City = ({city}) => {
console.log(city);
return (
<div>
<div>
<h1>{city.name}</h1>
<h1>{city.main.temp}</h1>
<h1>{city.weather[0].main}</h1>
</div>
</div>
)
}

export default City[/CODE]

Yukarıdaki kod bloğundan dolayı boş ekran sorunu var ama nedenini çözemedim.

[CODE lang="javascript" title="App.jsx"]import axios from 'axios'
import './App.css'
import { useEffect } from 'react'
import { useState } from 'react';
import City from './City';

function App() {

const key = "sildim";
const [city, setCity] = useState();
const [search, setSearch] = useState("");

useEffect(()=>{
async function getApi() {
try {
const response = await axios.get(https://api.openweathermap.org/data/2.5/weather?q=${search}&appid=${key}&units=metric);
console.log(response);
setCity(response.data);
} catch (error) {
console.error(error);
}
}

getApi();

},[search]);
console.log(search);
return (
<>
<div className="mb-3 pt-0">
<input onKeyDown={(e) => setSearch(e.target.value)}
type="text" placeholder="Placeholder"
className="px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus

utline-none focus:ring w-full"/>
<City city={city} />
</div>
</>
)
}

export default App[/CODE]

brkdnmz · 1 Ocak 2024

Büyük ihtimalle hata veriyor kodunuz, "Uncaught Error"dan dolayı beyaz sayfa görüyorsunuz.

Birkaç ihtimal:

city === undefined
city.main === undefined
city.weather === undefined
city.weather[0] === undefined

Girdi kısmı boşken, ele almadığınız bir durum yaşanıyor olabilir.

Genuine · 1 Ocak 2024

Tarayıcının konsol kısmında aşağıdaki hataları veriyor.

brkdnmz · 1 Ocak 2024

Genuine dedi:
Tarayıcının konsol kısmında aşağıdaki hataları veriyor.

Eki Görüntüle 5835

Hah, bu konsol çok önemli, kesinlikle geliştirme aşamasında sık sık kullanın.

City bileşeninin aldığı city objesi undefined ve siz bunun öyle olmadığını varsayarak name özelliğine erişmeye çalışıyorsunuz.

Girdi boşken neler oluyor, kodunuzu bir gözden geçirin.

Tahminimce city üst bileşende bir state ve direkt şöyle tanımlıyorsunuz:

JavaScript:

const [city, setCity] = useState();

Girdideki değişime göre de gerekli güncellemeleri yapıyorsunuz. State'in ilk değerine dikkat edin.

Genuine dedi:

App.jsx:

Kod:

import axios from 'axios'
import './App.css'
import { useEffect } from 'react'
import { useState } from 'react';
import City from './City';

function App() {

const key = "sildim";
const [city, setCity] = useState();
const [search, setSearch] = useState("");

  useEffect(()=>{
    async function getApi() {
      try {
        const response = await axios.get([ICODE]https://api.openweathermap.org/data/2.5/weather?q=${search}&appid=${key}&units=metric[/ICODE]);
        console.log(response);
        setCity(response.data);
      } catch (error) {
        console.error(error);
      }
    }

    getApi();

  },[search]);
  console.log(search);
  return (
    <>
      <div className="mb-3 pt-0">
        <input onKeyDown={(e) => setSearch(e.target.value)}
        type="text" placeholder="Placeholder"
        className="px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"/>
        <City city={city} />
      </div>
    </>
  )
}

export default App

Küçültmek için tıkla...

Yeni gördüm, tahmin ettiğim gibiymiş.

city state'ine bir ilk değer atamanız gerekiyor. Bir diğer seçenek de City bileşeninde city === undefined iken duruma ayrıca bir if ile müdahale etmek.

Aslında tam tahmin ettiğim gibi değilmiş, daha doğru açıklayayım:
Bir URL'e istek gönderip gelen cevapla city'ye değer atamak istiyorsunuz. Unutmayın ki cevap gelene kadar city === undefined olacaktır, kod cevap gelmesini beklemediği için (asenkron, doğal olarak beklemeyecek). Burada bir "yükleniyor" mekanizması kurmak güzel olabilir. Tek kontrol etmeniz gereken city'nin undefined olup olmadığı. Hata ihtimalini es geçiyorum, gerisini siz düşünebilirsiniz.

Genuine dedi:
Ben aşağıdaki verileri almak isterken <h1> etiketine sahip olan satırları siliyorum input alanı geliyor. Input alanına yazmak istediğim şehri yazdıktan sonra <h1> etiketlerini tekrar yerlerine yazınca ancak o şekilde çalışıyor.

Burada sanırım şöyle bir şey oluyor: Siz h1'leri tekrar devreye sokana kadar API'dan cevap gelmiş ve dolayısıyla state'iniz güncellenmiş oluyor. Bu da söz konusu hatanın önüne geçiyor ve her şey sorunsuz çalışıyor. Kodda değişiklik yaptığınızda her şey sıfırlanmıyor (Hot Module Reloading diye geçiyor sanırım), sadece değişikliklere göre sayfada güncelleme yapılıyor. State'in sıfırlanması gerekmediği için sıfırlanmıyor.

Genuine · 2 Ocak 2024

brkdnmz dedi:
city state'ine bir ilk değer atamanız gerekiyor. Bir diğer seçenek de City bileşeninde city === undefined iken duruma ayrıca bir if ile müdahale etmek.

Dediğiniz gibi if yapısı ekledim ve sorun çözüldü. Yapıyı return üzerine ekledim.

[CODE title="Eklenen if yapısı"]if(city===undefined){
return <div id="font">Şehir bilgisi burada gösterilecektir</div>
}[/CODE]

Ayrıca ekstra olarak App.jsx'de onKeyDown yerini onKeyUp ile değiştirerek son harfine kadar yazılan input 'a göre bilgiler geliyor.

brkdnmz · 2 Ocak 2024

Genuine dedi:
Dediğiniz gibi if yapısı ekledim ve sorun çözüldü. Yapıyı return üzerine ekledim.

Harika!

Bu konunuz üzerine TypeScript'e bir bakmanızı öneririm. Burada fark etmediğiniz city === undefined vb. ihtimalleri TypeScript kendisi analiz edip size söylüyor.

Mesela aşağıdaki kodda direkt city.name yapmanıza müsaade etmiyor. Bunun yerine örneğin optional chaining kullanmaya zorluyor (city?.name) veya sizin yaptığınız gibi kodun o kısmına gelindiğinde city === undefined olmasının imkansızlığını gerektiriyor.

Genuine dedi:

City.jsx:

Kod:

import React from 'react'

const City = ({city}) => {
    console.log(city);
  return (
    <div>
        <div>
            <h1>{city.name}</h1>
            <h1>{city.main.temp}</h1>
            <h1>{city.weather[0].main}</h1>
        </div>
    </div>
  )
}

export default City

Küçültmek için tıkla...

Genuine dedi:
Ayrıca ekstra olarak App.jsx'de onKeyDown yerini onKeyUp ile değiştirerek son harfine kadar yazılan input'a göre bilgiler geliyor.

Bu dediğiniz, bir harfe basılı tutarken geçerli olmalı çünkü sonuçta normal yazı yazarken sürekli bir harften parmağımızı kaldırıp bir başka harfe basıyoruz.

Çözüldü React Vite web uygulamasını ilk çalıştırmada boş sayfa sorunu

Detaylar

Genuine

Yetkin

brkdnmz

brkdnmz

Üstün

Genuine

Yetkin

brkdnmz

Üstün

Genuine

Yetkin

brkdnmz

Üstün

Genuine

Yetkin

brkdnmz

Üstün

Benzer konular

Yeni konular

Yeni mesajlar