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，直到更改为止。然后，您会在true回调中将该值更新为fetch。这将解决返回值但 falsy 的问题，例如''或0

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

1 个答案: