當我第一次使用React渲染我的頁面時如何更新我的索引？-有解無憂

我如何在第一次渲染頁面時更新我的??索引，一切都按我想要的方式作業，但第一次渲染它回傳，undefined所以我無法在第一次渲染時獲取資訊。

首次重繪 /渲染頁面：

當我第一次使用 React 渲染我的頁面時如何更新我的索引？

滑動或單擊下一步后回傳上一項，它將正確更新。

當我第一次使用 React 渲染我的頁面時如何更新我的索引？

這是我的代碼：

import { useState, useEffect } from "react"
import './home.css'
import { supabase } from '../../supabaseClient'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Pagination,Navigation } from 'swiper';
import 'swiper/css'

SwiperCore.use([Pagination,Navigation]);
function Home(){
    
    const [animeDetail, setAnimeDetail] = useState([])
    const [swiperIndex, setSwiperIndex] = useState()

    useEffect(async ()=>{
        fetchAnime()
    }, [])

    async function fetchAnime() {
        const { data } = await supabase
            .from ('anime')
            .select ()
            setAnimeDetail(data)
    }

    return (
        <>
        <div className="spacer">
            &nbsp;
        </div>
        <div className="home-section">

            <h2>Home Page</h2>

            <Swiper
            runCallbacksOnInit = {true}
            centeredSlides={true}
            slidesPerView = {7}
            spaceBetween={10}
            loop={false}
            pagination={false} 
         // I set my index to the state here
            onActiveIndexChange={(swiperCore) => {setSwiperIndex(swiperCore.realIndex)}}
            navigation={true} className="mySwiper">
                {animeDetail.map((element, i)=> 
                    (
                    <SwiperSlide key = {i}>
                        <img src={element.anime_image}/>
                    </SwiperSlide>
                    )
                    )}
            </Swiper>

        {/* Current index of active slide */}
        {console.log(swiperIndex)}
        {/* The specific info contains on active slide */}
        {console.log(animeDetail[swiperIndex])}
        {/* An array list contains each anime */}
        {console.log(animeDetail)}
        </div>
        </>
    )

}
export default Home

編輯：在我嘗試了@Dae Hyeon Mun 的解決方案后，問題仍然存在。

當我第一次使用 React 渲染我的頁面時如何更新我的索引？

我仍然得到undefined第一次呈現/重繪頁面的時間。

當我第一次使用 React 渲染我的頁面時如何更新我的索引？

uj5u.com熱心網友回復：

您應該從0索引的初始狀態值開始：

// const [swiperIndex, setSwiperIndex] = useState() // before
const [swiperIndex, setSwiperIndex] = useState(0) // after

在第一次渲染時，您將只擁有作為狀態初始值提供的資料（空陣列和0）。useEffect直到第一次渲染之后才運行。

uj5u.com熱心網友回復：

嘗試修復代碼如下

 useEffect(async () => {

    const { data } = await supabase
        .from ('anime')
        .select()

    setAnimeDetail(data)
    }, [])

   if (animeDetail.length === 0) {
     return <div>Loading</div>;
   }
   .... rendering //

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/395473.html

標籤：反应反应钩子

上一篇：洗掉陣列中的物件

下一篇：在反應中的特定專案上啟動手風琴選單