iT邦幫忙

0

如何在使用非同步請求數據的情況下,傳遞請求的數據到子層中

Hi 各位版上的大大們,最近在撰寫React的時候遇到了一些問題,我需要在父層使用非同步請求的方式取得數據,在取得完數據後將指定的數據傳遞給子層進行選染,但是由於是非同步的方式請求數據會導致我的子層無法第一時間取得數據,請問大大們在遇到這種情況下是只能使用同步的方式請求數據後再傳遞給子層嗎?

下面是我的程式碼 :

非同步請求 :

import _axios from "axios";

const axios = (baseURL) => {
    const instance = _axios.create({
        baseURL : baseURL
    })
    return instance
}
export {axios};
export default axios();

父層 :

class App extends React.Component
{
    state = {
        dataList:[],
        dataCount:0
    }
    
    componentDidMount(){
        axios.get("https://data.kcg.gov.tw/api/action/datastore_search?resource_id=92290ee5-6e61-456f-80c0-249eae2fcc97").then((res)=>{
            const PageCount = res.data.result.records.length / 10;
            this.setState({
                dataList : res.data.result.records,
                dataCount : PageCount,
            })
        })
    }
    
    render()
    {
        return(
            <PageContainer 
                dataCount = {this.dataCount}
            />
        )
    }
}

子層 :

class PageContainer extends React.Component
{
    render()
    {
        console.log(this.props)
        return(
            <div></div>
        )
    }
}

運行結果 :
https://ithelp.ithome.com.tw/upload/images/20200517/20124767MG6v1qSmNq.png

1 個回答

1
dragonH
iT邦超人 5 級 ‧ 2020-05-17 16:29:25

我會寫成類似這樣

codepen

看你有沒有真的一定要同步取得資料

我要發表回答

立即登入回答