由于 ajax 请求，React Native 三元运算符显示滞后答案

【问题标题】：React Native ternary operator display lag due to ajax request由于 ajax 请求，React Native 三元运算符显示滞后
【发布时间】：2020-10-06 00:42:48
【问题描述】：

我有 isRegistered 我通过 ajax 调用获取所以 isRegistered 需要一定的时间来设置。

        <View style={{ width: '48%' }}>
          <Text style={style.labelStyle}>

            {isRegistered ? 'Attempt' : 'Amount'}

          </Text>
        </View>

因此，在我看到“尝试”之前，我首先看到了“数量”（几百毫秒，人类很明显）

我怎样才能避免这种情况？

我正在 IOS 模拟器（不是设备）上开发，但想知道它也会发生在真实设备上

【问题讨论】：

我认为你不能完全避免它......你可以添加一些UI组件直到获得isRegistered的状态！

标签： ios react-native jsx

【解决方案1】：

如果您想避免这种行为，您需要在 AJAX 调用完成之前显示加载指示器等。

<View style={{ width: '48%' }}>
  { isLoading && (<View style={{ flex: 1, justifyContent: "center", alignItems: "center"><Text style={style.labelStyle}>{"Loading"}</Text></View> )}

  { !isLoading && (
  <Text style={style.labelStyle}>
    { isRegistered ? 'Attempt' : 'Amount'}
  </Text>
 )}
</View>

您也可以尝试在前一个屏幕上提前进行此 AJAX 调用以避免这种行为。

【讨论】：