React Native课程数组筛选失效，输入匹配内容无显示求解决方案

问题概述 #

在React Native的Learn组件中实现课程数组搜索筛选时，遇到以下问题：搜索输入框为空时所有课程可正常加载，但输入匹配关键词后，对应课程无法显示，内容全部消失。原筛选逻辑存在语法和逻辑错误。

错误原因分析 #

原筛选逻辑存在多处问题：

• filter 方法的回调函数错误地尝试直接渲染组件，而非返回布尔值用于筛选数组
• 大小写匹配不一致：仅将搜索输入转为小写，但未对课程标题做同样处理，导致匹配失效
• 变量命名冲突：filter 参数使用了和数组同名的 lessons，造成变量混淆
• 筛选后未通过 map 方法渲染组件，且引用了不存在的 doc 变量

修正后的代码实现 #

推荐写法：将筛选逻辑抽离为变量（更清晰易维护） #

export default function Learn() {
  const [lessons, setLessons] = useState([]);
  const [searchinput, setSearchInput] = useState("");
  // 提前处理筛选后的课程数组
  const filteredLessons = searchinput
    ? lessons.filter(lesson => 
        lesson.title.toLowerCase().includes(searchinput.toLowerCase())
      )
    : lessons;

  return (
    <View style={learnStyle.maincont}>
      {/* 其他UI部分保持不变 */}
      <View>
        <Text style={{fontSize:28,marginTop:20}}>Courses</Text>
        <ScrollView style={{paddingBottom:200}}>
          {/* 直接遍历筛选后的数组 */}
          {filteredLessons.map((doc, key) => (
            <LessonCard 
              key={key} 
              setModalVisible={setModalVisible} 
              title={doc.title} 
              desc={doc.desc} 
              img1={doc.imgURL} 
              modalVisible={modalVisible} 
            />
          ))}
          <View style={{height:600,width:"100%"}}></View>
        </ScrollView>
      </View>
    </View>
  );
}

若需保留三元表达式写法（修正原逻辑） #

{searchinput === "" ? 
  lessons.map((doc, key) => (
    <LessonCard 
      key={key} 
      setModalVisible={setModalVisible} 
      title={doc.title} 
      desc={doc.desc} 
      img1={doc.imgURL} 
      modalVisible={modalVisible} 
    />
  )) : 
  lessons
    .filter(lesson => 
      lesson.title.toLowerCase().includes(searchinput.toLowerCase())
    )
    .map((doc, key) => (
      <LessonCard 
        key={key} 
        setModalVisible={setModalVisible} 
        title={doc.title} 
        desc={doc.desc} 
        img1={doc.imgURL} 
        modalVisible={modalVisible} 
      />
    ))
}

关键修正点说明 #

• 统一大小写处理：将搜索输入和课程标题都转为小写，确保匹配不受大小写影响
• 正确使用filter和map：先用filter筛选出符合条件的课程数组，再通过map渲染对应的LessonCard组件
• 变量命名规范：filter参数使用lesson而非lessons，避免与原数组变量名冲突
• 逻辑抽离优化：将筛选逻辑抽离为单独变量，让JSX结构更简洁，便于后续维护

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