隐藏状态驱动文本，直到状态准备就绪

Posted 2021-03-27

在我的应用程序中，我有不同的组件由当前文本状态驱动。例如。：

<Text>Account Balance: {this.state.account_balance}</Text>

但是，想知道一旦状态设置（目前正在等待axios呼叫），只显示这些最佳做法是什么？

我的hacky解决方案是设置一个控制某些逻辑的“show”状态。但这感觉很长，并怀疑他们可能是更简单的方法来处理这个问题。

答案

假设帐户余额从null开始，表示它尚未加载，您可以在渲染<Text>元素之前检查它。例如：

state = {
  account_balance: null,
}

async componentDidMount() {
  const response = await fetch('someUrl');
  const data = await response.json();
  this.setState({
    account_balance: data
  });
}

render () {
  return (
    <View>
      {this.state.account_balance !== null && 
        <Text>Account Balance: {this.state.account_balance}</Text>
      }
    </View>
  )
}