Question

我有一个要为用户创建的表单，用于创建家庭作业。我有一个下拉菜单供他们在表单中选择，但我只想显示下拉菜单（如果它们有任何类，存储为this.props.classes）。过去，我能够有条件地使用状态渲染某些组件，但是当我尝试使用props进行操作时，它现在不起作用。

我如何尝试：

{ this.props.classes !== [] && //I still see it even if it's an empty array
  <View style={{ flex: 1, bottom: 20 }}> //doesn't work with the !== check or without
    <Dropdown
      label='Class'
      baseColor='#fcefef'
      data={this.props.classes}
      valueExtractor={(value) => value.name}
      onChangeText={formikProps.handleChange('class')}
      dropdownPosition={-2}
    />
 </View>
}

如果任何人都可以展示如何实现我期望的行为，将不胜感激。谢谢。

Answer 1

this.props.classes.length !== 0

Answer 2

发生这种情况是因为数组是JavaScript中的引用类型。实际上，this.props.classes是否为空数组并不重要，因为它是一个新的Array实例，所以它永远不会等于[]。

解决方案：您只需检查classes的长度是否等于0。

{this.props.classes.length !== 0 && ...}

如何有条件地使用redux数组进行渲染？

2 个答案: