React Native Expo中FlatList字符串匹配失效求助：判断是否含KG/EG

核心问题分析 #

• 现有代码仅判断了包含KG的情况，未覆盖需求中的EG匹配场景
• 未处理item.bauteile_lage为null或undefined的边界情况，直接调用includes会引发运行时错误
• 变量z的作用域未明确，且使用松散相等==可能导致隐式类型转换引发的逻辑异常

修复后的代码示例 #

<FlatList 
  style={styles.FlatList}
  data={bauteile}
  scrollEnabled={false}
  keyExtractor={(item, index) => `${index}-${item.value}`}
  renderItem={({item, index}) => {
    // 空值安全处理 + 同时匹配KG/EG
    const matchesCondition = item.bauteile_lage?.includes("KG") || item.bauteile_lage?.includes("EG");
    
    return (
      <View>
        {matchesCondition ? (
          <View>
            {z === 0 ? (
              <View>
                <Text>Bauteilbereich</Text>             
              </View>
            ) : null}
          </View>
        ) : null}
      </View>
    );
  }}
/>

关键优化点说明 #

• 空值安全：使用可选链操作符?.，避免item.bauteile_lage为空时调用includes报错
• 覆盖所有匹配需求：通过逻辑或||同时判断KG和EG，满足业务要求
• 严格相等判断：将z == 0改为z === 0，避免隐式类型转换导致的意外结果
• 优化列表key：用${index}-${item.value}生成更唯一的key，符合React列表组件最佳实践

额外排查建议 #

1. 在renderItem中添加console.log(item)，确认bauteile数组的每个元素确实存在bauteile_lage字段，且值符合预期格式
2. 验证变量z的取值逻辑，确保它在列表渲染时的状态符合显示条件要求

内容的提问来源于stack exchange，提问作者sinan_u