Question

我有一个条件语句，用于确定应在屏幕上呈现哪个JSX。它查看状态中保存的数组，如果为空，则呈现图像和一些文本。但是，如果已填充，则使用“平面列表”呈现数据。

当条件语句等于false（数组为空）时，图像和文本会非常短暂地呈现（大约半秒钟）。

如何更改它以使其完全不显示？正如逻辑所暗示的那样。

我的代码如下：

render() {
if (this.state.array === undefined || this.state.array.length === 0) {
  return (
    <View>
      <View>
        <Text> Tap the (+) button to add an item.</Text>
        <Image source={require('../images/image.png')} />
      </View>
    </View>
    );
}

//If array data
return (
    <View>
      <FlatList
          data={this.state.array}
          renderItem={({ item }) => <TrackedItem {...item} />}
          keyExtractor={(item, index) => index.toString()}
      />
    </View>
   );
 }

Answer 1

也许您的问题与您的病情有关。您正在检查namespace PX.Objects.PO { public class POOrderEntry_Extension : PXGraphExtension<POOrderEntry> { #region Event Handlers [PXDBDate()] [PXDefault(typeof(POOrder.orderDate), PersistingCheck = PXPersistingCheck.Nothing)] [PXUIField(DisplayName = "Promised On", Visibility = PXUIVisibility.Visible, Visible = false)] protected virtual void POOrder_ExpectedDate_CacheAttached(PXCache cache) { } #endregion } }，然后检查this.state.array。

我重写了一些可能按预期工作的代码

this.state.foods

根据您所在州宣布的正确道具，只需将const { foods } = this.state; render() { return ( <View> {!foods || foods.length === 0 ? <View> <Text> Tap the (+) button to add an item.</Text> <Image source={require('../images/image.png')} /> </View> : <FlatList data={foods} renderItem={({ item }) => <TrackedItem {...item} />} keyExtractor={(item, index) => index.toString()} /> } </View> ); }替换为foods

当您的数组为空时，此代码将显示文本array。

所以你不想显示这个文字吗？如果是这样，您只需将条件更改为仅在您的数组存在时呈现Tap the (+)...，并且如果它的长度为＆gt; 0，类似于：

<FlatList>

如果您只想在第一个渲染中不显示，那么您可能需要一个加载处理程序。像这样：

return (
    <View>
     {(foods && foods.length > 0) &&
      <FlatList
          data={foods}
          renderItem={({ item }) => <TrackedItem {...item} />}
          keyExtractor={(item, index) => index.toString()}
      />
     }
    </View>
  );

希望有所帮助

Answer 2

根据MattyK14的建议，我包含了一个渲染器（或加载屏幕），它会一直呈现，直到检索到数据。这阻止了“没有数据”。在返回列表之前，屏幕会非常简短地呈现。

这包含在if语句上方：

  if (this.state.loading) {
  return <Spinner />;
}

React Native：条件渲染无法正常工作

2 个答案: