React项目使用Chakra UI过滤数组时筛选后列表消失问题排查

问题原因 #

• 错误使用Array(notes)构造数组：若notes本身已是数组，Array(notes)会生成二维数组，无法正确遍历单个笔记对象，导致全部匹配失败。
• 方法调用顺序错误：map被嵌套在filter的回调函数内部，过滤逻辑未按预期执行。
• 大小写不匹配：仅对笔记标题做了小写转换，未对搜索关键词filterText做同规则处理，大小写不一致会导致匹配失败。
• 代码冗余：两份渲染笔记卡片的逻辑完全重复，无需拆分两个条件分支。

修复后代码 #

return (
  <Grid templateColumns="repeat(3, 1fr)" gap={6} marginTop="2">
    {notes
      .filter(note => {
        // 无搜索关键词时保留所有笔记
        if (!filterText) return true
        // 统一转为小写后匹配，避免大小写差异导致匹配失败
        return note.title?.toLocaleLowerCase().includes(filterText.toLocaleLowerCase())
      })
      .map(note => (
        <Box
          key={note.id}
          bg="gray.100"
          w="100%"
          h="100px"
          overflow="auto"
          textAlign="center"
        >
          <Text fontSize="18px" bg={handleNoteColor(note.color)}>Note {note.id}</Text>
          <Text fontSize="13px">{note.title}</Text>
        </Box>
      ))
    }
  </Grid>
)

内容的提问来源于stack exchange，提问作者Mehmet Aziz Algüllü