React'ta yapılan kod yenilemeden çalışmıyor

AventDrago · 24 Ağustos 2024

React'ta yaptığım kodu Visual Studio'da yenilemeden çalışmıyor, nasıl düzelteceğimi anlamadım. Rica etsem yardımcı olur musunuz?
Koda ulaşmak için.

brkdnmz · 27 Ağustos 2024

State yönetimini "React yolu"yla yapmamışsınız çünkü. Düzeltmenin birkaç yolu var, ben useState üzerinden gideceğim yeterli olduğu için.

React'te bir component'ta useState kullanmak ve ilgili state'i setState ile güncellemek, component'ın yeniden render'lanması yani ekranda en güncel state'i kullanacak şekilde güncellenerek görüntülenmesini sağlamanın birkaç yolundan birisi.

Sizin yaptığınız, component dışında global bir liste tanımlayıp component içinde bu listeye .push() ile yeni elemanlar eklemek. Bu, maalesef component'ın yeniden render'lanmasına yol açmıyor. Şöyle diyebiliriz kabaca: Component, yeniden render'lanması gerektiğini anlamıyor bile. Bu, useRef kullanmaya benziyor.

db.jsx dosyasında db listenizi tanımlıyorsunuz:

JavaScript:

export const db = []

App.jsx dosyanızda bu listeyi kullanıyorsunuz:

JSX:

import './App.css'
import Header from './Header'
import axios from 'axios'
import Tablo from './Tablo'
import {db} from './db'

function App() {
  const searchImages = async (data) => {
    const cevap = await axios.get('https://api.unsplash.com/search/photos', {
      headers:{
        Authorization : 'Client-ID yTWU1o6dQqCd3Yw5UH7Ck4Pi77T-p_rFm4srl_D4MEQ'

      },
      params: {
        query:data
      }

    })
  cevap.data.results.map((elemental) => {
    db.push(elemental.urls.small)
  })
  }
  const onHandle = (veri) => {
    searchImages(veri)
  }
  return (
    <>
      <Header search={onHandle} />
      {
        db.map((data,index) => {
          return <Tablo key={index} resim={data}/>
        })
      }
    </>
  )
}

export default App

Sorunun üstesinden gelmenin (bir) yolu da db'yi App component'ında state olarak tutmak:

JSX:

import axios from "axios";
import { useState } from "react";
import "./App.css";
import Header from "./Header";
import Tablo from "./Tablo";

function App() {
  const [db, setDb] = useState([]);

  const searchImages = async (data) => {
    const cevap = await axios.get("https://api.unsplash.com/search/photos", {
      headers: {
        Authorization: "Client-ID yTWU1o6dQqCd3Yw5UH7Ck4Pi77T-p_rFm4srl_D4MEQ",
      },

      params: {
        query: data,
      },
    });

    cevap.data.results.map((elemental) => {
      setDb([...db, elemental.urls.small]);
    });
  };

  const onHandle = (veri) => {
    searchImages(veri);
  };

  return (
    <>
      <Header search={onHandle} />

      {db.map((data, index) => {
        return (
          <Tablo
            key={index}
            resim={data}
          />
        );
      })}
    </>
  );
}

export default App;

Kodun görünümünü iyileştirmek için Prettier ile formatladım.

AventDrago dedi:
... yenilemeden çalışmıyor.

Çok hakim olduğum bir konu değil ancak sanırsam HMR (Hot Module Reload) sayesinde bir dosyayı kaydedince rerender tetikleniyor ama bu olurken db listesi etkilenmiyor, bu sayede görselleri görebiliyorsunuz.

React'ta yapılan kod yenilemeden çalışmıyor

Ayrıntılı düzenleme

AventDrago

Femtopat

brkdnmz

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz