等待在React-Native组件中显示文本

Question

我有一个从api获取数据的组件，然后将其显示在屏幕上。 我想知道的是，如何延迟在api调用完成之前在屏幕上显示文本？

例如：

Your Balance is ____

网络通话解决后

Your Balance is 500

但是在呈现组件后立即显示"Your Balance is" 。

import React, { Component, PropTypes } from 'react'
import {StyleSheet, View, Text} from 'react-native'

export default class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      accountBalance: ''
    };

    fetch('someURL', {method: "GET"})  
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          accountBalance: responseData.amount
        })
      })
      .done();

  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: '#FFF'}}> Your Account Balance is {this.state.accountBalance} </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    paddingTop: 74,
    backgroundColor: 'black'
  }
})

Answer 1

在这种情况下，您可以做一些简单的事情，例如在没有余额的情况下返回null ：

render() {
  return (
    <View style={styles.container}>
      {this.state.accountBalance ? (
        <Text style={{color: '#FFF'}}> Your Account Balance is {this.state.accountBalance} </Text>
      ) : null}
    </View>
  )
}

您也可以使用单独的状态变量（例如this.state.balanceLoaded: false来跟踪请求，并返回null直到更改为止。 然后，您将在fetch回调中将该值更新为true 。 这将解决返回值但伪造的问题 ，例如''或0