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

Question

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

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

但是，想知道只有在设置状态(当前正在等待 axios 调用)后才显示这些的最佳做法是什么？

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

Answer 1

假设账户余额开始时为 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>
  )
}