レンダリング前にconstが値を持つのを待つ

Question

私はユーザーの名前と天びんを表示したいと思っていますが、天びんは名前の前にレンダリングしますが、同時にレンダリングしたいと思います。したがって、私は最初の名前は、天秤があるときに取得されていないと仮定して、私はこれに対してテストする必要があると想像します - なぜ私はwhileループを持っています。

renderBalanceAndName() { 
    const balance = this.context.account.getIn(['balance', 'total']); 
    const firstName = this.context.account.getIn(['accountDetails', 'data', 'firstName']); 

    while (firstName !== null) { 
     return (
     <Spinner size={theme.fontSize.alpha}/>, 
     <span>{firstName} {" "} &mdash; {" "} 
     <Money value={balance} /></span> 
    ); 
    } 

    return (
     <Spinner size={theme.fontSize.alpha}/> 
    ) 
    }, 

    renderAccountDetails() { 
    const balancePending = this.context.account.getIn(['balance', 'pending']); 

    return (
     <div style={{display: 'inline-block'}}> 
     <span style={styles.balance} className="qa-nav-balance-and-name"> 
      {balancePending && <Spinner size={theme.fontSize.alpha}/>} 
      {!balancePending && this.renderBalanceAndName(this.context.account)} 
     </span> 
     </div> 
    ); 
    }, 

Answer 1

あなたのコードからわかるように、.. account.getIn ..は非同期呼び出しです。

You should use states. Create a store and action file. Something like below 

    constructor(props) { 
      super(props); 
      // whenver there is change in appstore call update data function 
       AppStore.addListener(() => this.updateData()); 
     } 
     updateData() { 
      // Update state from appstore data. This will trigger render function 
      this.setState({ 
       ...AppStore.getState() 
      }); 
     } 
    renderBalanceAndName() { 
     //Fetch data state. 
     const balance = this.state.balance; 
     const firstName = this.state.firstName; 

     while (firstName !== null) { 
      return (
      <Spinner size={theme.fontSize.alpha}/>, 
      <span>{firstName} {" "} &mdash; {" "} 
      <Money value={balance} /></span> 
     ); 
     } 

     return (
      <Spinner size={theme.fontSize.alpha}/> 
     ) 
     }, 

     renderAccountDetails() { 
     const balancePending = this.context.account.getIn(['balance', 'pending']); 

     return (
      <div style={{display: 'inline-block'}}> 
      <span style={styles.balance} className="qa-nav-balance-and-name"> 
       {balancePending && <Spinner size={theme.fontSize.alpha}/>} 
       {!balancePending && this.renderBalanceAndName(this.context.account)} 
      </span> 
      </div> 
     ); 
     } 




And your store file: 


    case "dataUpdated": { 
    state = state.set(payload.key, payload.value); 
    return state; 
    } 


and your action file something like below: 

Action file: will be something like below: 

. 

    . 
    . 
     FETCH_DATA(refKey) { 
      let _this = this; 
// async call or value updates below: 
      let response = this.context.account.getIn(['balance', 'total']); 
      _this.dispatch({ 
       action: "dataUpdated", 
       ACQUDATA: response 
      }); 
     } 
     .... 



I havn't tested above code for syntax and there can be some syntax issue. This is just for understanding approach. 

Regards, 
sachin 

Answer 2

firstNameがpropで利用可能であるかどうかを確認します。いいえの場合は、<Spinner/>

renderBalanceAndName() { 
    const balance = this.context.account.getIn(['balance', 'total']); 
    const firstName = this.context.account.getIn(['accountDetails', 'data', 'firstName']) 
    if(!firstName) //check if firstName is available. 
     return (
     <Spinner size={theme.fontSize.alpha}/> 
    ) 

    while (firstName !== null) { 
     return (
     <Spinner size={theme.fontSize.alpha}/>, 
     <span>{firstName} {" "} &mdash; {" "} 
     <Money value={balance} /></span> 
    ); 
    } 
    }, 

    renderAccountDetails() { 
    const balancePending = this.context.account.getIn(['balance', 'pending']); 

    return (
     <div style={{display: 'inline-block'}}> 
     <span style={styles.balance} className="qa-nav-balance-and-name"> 
      {balancePending && <Spinner size={theme.fontSize.alpha}/>} 
      {!balancePending && this.renderBalanceAndName(this.context.account)} 
     </span> 
     </div> 
    ); 
    },