Veri yüklenmeden önce bileşenin görüntülemesini nasıl engelleyebilirim?

Question

Ben GetDealersStore adında bir mağazadan gelip sahne bekliyorum ve bunu verilerin alınmaya ediyorum yolu yapıyorum nerede bir eylem ile geçerli: çalıştıran

componentWillMount() { GetDealersActions.getDealers(); } 

Zaten uygulamayı test etmek

ve componentWillMount() Bu

let dealerInfo; 
if (this.state.dealerData) { 
    dealerInfo = this.state.dealerData.dealersData.map((dealer) => { 
    return (<div>CONTENT</div>); 
    }) 
} else { 
    dealerInfo = <p>Loading . . .</p> 
} 

var ama ilk saniye Eğer koşullu yukarıdaki else olan ekranda <p>Loading . . .</p> görebilirsiniz ve daha sonra işlemek geri kalanı olan return (<div>CONTENT</div>); ile giriyor hale baş harfi önceKoşullu olarak. Yani, sanırım bu, render yönteminin iki kez tetiklendiği anlamına geliyor çünkü veri tabanından gelen verileri beklemeye devam ediyor.

Veritabanındaki veriler 1. render sırasında mevcut değildir, bu nedenle, ilk verinin gerçekleşmesinden önce bu verileri nasıl alabilirim?

Answer 1

Bunu tek bir bileşenle yapamazsınız. Verileri görüntülemeden ayırmak için Container Component modelini izlemelisiniz.

let DealersContainer = React.createClass({ 
    getInitialState() { 
    return {dealersData: []}; 
    }, 
    componentWillMount() { 
    GetDealersActions.getDealers(); 
    }, 
    render() { 
    let {dealersData} = this.state; 
    return (<div> 
     {dealersData.map((dealer) => { 
     let props = dealer; 
     return (<Dealer ...props />); // pass in dealerData as PROPS here 
     })} 
    </div>); 
    } 
}); 

Sonra sahne alacak ve gerçek içeriği oluşturmak için Dealer bileşeni güncelleyin.

Answer 2

Cevabım Mathletics'e benzer, sadece daha ayrıntılı.

Bu örnekte, dealerData durumunu null; Bu, verilerin depodan depodan iade edilip edilmediğini belirlemek için yapılan kontroldür.

Bu ayrıntılı, ancak bildirimseldir ve istediğiniz sırayla, istediğiniz sırayla çalışır ve her defasında çalışır.

const DealerStore = MyDataPersistenceLibrary.createStore({ 
    getInitialState() { 
    return { 
     dealerData: null 
    }; 
    }, 

    getDealers() { 
    // some action that sets the dealerData to an array 
    } 
}); 

const DealerInfoContainer = React.createClass({ 
    componentWillMount() { 
    DealerStoreActions.getDealers(); 
    }, 

    _renderDealerInfo() { 
    return (
     <DealerInfo {...this.state} /> 
    ); 
    }, 

    _renderLoader() { 
    return (
     <p>Loading...</p> 
    ); 
    }, 

    render() { 
    const { dealerData } = this.state; 

    return (
     dealerData 
     ? this._renderDealerInfo() 
     : this._renderLoader() 
    ); 
    } 
}); 

const DealerInfo = React.createClass({ 
    getDefaultProps() { 
    return { 
     dealerData: [] 
    }; 
    }, 

    _renderDealers() { 
    const { dealerData } = this.props; 

    return dealerData.map(({ name }, index) => <div key={index}>{name}</div>); 
    }, 

    _renderNoneFound() { 
    return (
     <p>No results to show!</p> 
    ); 
    }, 

    render() { 
    const { dealerData } = this.props; 

    return (
     dealerData.length 
     ? this._renderDealers() 
     : this._renderNoneFound() 
    ); 
    } 
});