Question

我想要呈现用户的名称和平衡，但是在名称之前渲染余额，但我希望它们同时渲染在一起。因此我假设在余额有时没有获取firstName，因此我想我需要对此进行测试 - 这就是为什么我有' Import Hourly stats DoCmd.TransferSpreadsheet transfertype:=acImport, SpreadsheetType:=10, _ tablename:="Hourly", FileName:="C:\Filename\folder\stats*", _ Hasfieldnames:=True, Range:="AgentActivity!"循环。

while

Answer 1

检查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>
    );
  },

Answer 2

据我所知，你的代码中，... 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

在渲染之前，React等待const有值

2 个答案: