Reactjs sayfanın verilerden önce render edilme sorunu

rambo44553 · 9 Mart 2024

Merhaba arkadaşlar;
React ile geliştirdiğim bir projem var ancak sürekli sonradan gelen verilerin problemini yaşıyorum. Backend'te C# restapi mevcut Backend'ten gelen dataları işlerkende bazen State'lerin asenkron olmasından kaynaklı yönetimi tam beceremiyorum aynı zamanda parent-child ilişkilerinde Component'ler arası veri transferlerinde'de bu problem ile sıkça karşılaşyorum. Örneğin.

Kod:

const Instructor = ({user}) => {
 console.log("slide effect user")
 console.log(user)
 const [userData,setUserData] = useState();

 useEffect(()=>{
 setUserData(user)
 },[user])

 return ()

Yukarıdaki örnekte sayfa render işleminde bazen datalar düzgün bir şekilde işlenirken geçişlerde vs sürekli olarak aşağıdaki hata ile karşılaşıyorum.

Uncaught typeerror: Cannot read properties of undefined (reading 'username')

Bu konuda beni yekili biri aydınlatabilir mi? Şimdiden teşekkürler.

734204 · 9 Mart 2024

Koddaki username nerede?

rambo44553 · 9 Mart 2024

render edilen component'in tamamı aşağıda;

Kod:

const Instructor = ({user}) => {
        console.log("slide effect user")
        console.log(user)
        const [userData,setUserData] = useState();

        useEffect(()=>{
            if (user) {
                setUserData(user)
                
            }
        },[user])
    
    
    return (
        <div className="team-info-wrap">
            <div className="row align-items-center">
                <div className="col-lg-5">
                    <div className="team-info-img">
                        <img src={tsImg} alt="" />
                    </div>
                </div>
                <div className="col-lg-7">
                    <div className="team-info-text">
                        <h2> {userData.userName} </h2>
                        <ul>
                            <li>Position: <span>Web Developer</span></li>
                            <li>Experience:<span>12 Years</span></li>
                            <li>Address:<span>6391 Elgin St. Celina, Delaware 10299</span></li>
                            <li>Phone:<span>+00 568 746 987</span></li>
                            <li>Email:<span> {userData.email} </span></li>
                        </ul>

                        <div className="certificates-wrap">
                            <h2>Certificates</h2>

                            <div className="certificates-items">
                                <div className="certificates-item">
                                    <img src={cImg1} alt="" />
                                </div>
                                <div className="certificates-item">
                                    <img src={cImg2} alt="" />
                                </div>
                                <div className="certificates-item">
                                    <img src={cImg3} alt="" />
                                </div>
                                <div className="certificates-item">
                                    <img src={cImg4} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Instructor;

734204 · 9 Mart 2024

UserName'i çektiğin yerde şu şekilde yapınca düzeliyor mu?

JavaScript:

<h2> {userData?.userName} </h2>

Ayrıca user'ın tipi ve içerisindeki değişkenlerin, userData ile birebir uyuşması gerekiyor. O yüzden useState içerisinde gerekirse değişken türünü de belirtebilirsin.

O da olmadı veriler doğru geliyor mu? Mesela user'ın içeriği olması gerektiği gibi mi? Keza useEffect ile set edilince userData değeri beklediğin şekilde mi?

rambo44553 · 9 Mart 2024

Silinen üye dedi:
UserName'i çektiğin yerde şu şekilde yapınca düzeliyor mu?

JavaScript:

<h2> {userData?.userName} </h2>

Ayrıca user'ın tipi ve içerisindeki değişkenlerin, userData ile birebir uyuşması gerekiyor. O yüzden useState içerisinde gerekirse değişken türünü de belirtebilirsin.

O da olmadı veriler doğru geliyor mu? Mesela user'ın içeriği olması gerektiği gibi mi? Keza useEffect ile set edilince userData değeri beklediğin şekilde mi?

konsol'a yazdırdığım zaman normal bir şekilde datalar geliyor.Sayfa render edilirken bir koşul ile manipüle etmeyi becerdim ama ne kadar doğru bilmiyorum açıkçası.Typescript yazmıyorum dolayısıyla tip belirleyemiyorum.Bahsettiğiniz şekilde nullable denemeyi düşünemedim ama yardımınız için teşekkür ederim ben aşağıdaki şekilde datalar gelmeden sayfanın render edilmesini önleyerek problemi şimdilik çözdüm.

Kod:

const Instructor = ({user}) => {
        console.log("slide effect user")
        console.log(user)
        const [userData,setUserData] = useState();

        useEffect(()=>{
            if (user) {
                setUserData(user)
                
            }
        },[user])

        if (!userData) {
            return (
                <div>
                    <h1><span>...isLoading</span></h1>
                </div>
            )
        }

Hazır bir reactjs'ci yakalamışken bana önerebileceğin hazır kullanabileceğim ActivityIndicator tarzında bir loading component'i varmı böyle güzel birşey.

734204 · 10 Mart 2024

rambo44553 dedi:
Hazır bir reactjs'ci yakalamışken bana önerebileceğin hazır kullanabileceğim ActivityIndicator tarzında bir loading component'i varmı böyle güzel birşey.

Tekrar merhaba. Geç cevap için kusura bakmayın. Size tam olarak nasıl bir şey lazım bilemiyorum ama React'ın kendisinde şöyle bir kullanım var. Bunun dışında react-loading-skeleton, react-loading veya react-spinners gibi hazır npm paketlerini kullanabilirsiniz.

Reactjs sayfanın verilerden önce render edilme sorunu

rambo44553

Hectopat

734204

Centipat

rambo44553

Hectopat

734204

Centipat

rambo44553

Hectopat

734204

Centipat