如何使用React Hooks实现React项目中CARDS卡片的字段搜索功能

核心问题点 #

• 你定义的notes状态初始化是空数组，且没有和组件接收的details属性（也就是你的卡片数据源）做同步，过滤逻辑一直基于空数组执行，所以不管输入什么都不会有匹配结果。
• 输入框没有做值绑定，属于非受控组件，极端场景下可能出现输入值和状态不一致的问题。
• 需要确认子组件Notess接收的渲染属性名是否为filter，如果子组件内部是读取notes之类的属性渲染列表，需要对应修改传参名。

修正后代码 #

import React, { useEffect, useState } from 'react'
import NoteCard from '../components/NoteCard'
import Masonry from 'react-masonry-css'
import Notess from '../components/CardList'
// 补充导入你用到的Container组件，替换为实际的组件库路径
import { Container } from '你的组件库路径'

export default function Notes({ details }) {
  const [searchField, setSearchField] = useState("");

  // 直接用传入的details作为数据源，无需额外存state，有本地修改需求再用useEffect同步到state
  const filteredNote = (details || []).filter(
    note => {
      // 加可选链避免空值报错
      return note?.title?.toLowerCase().includes(searchField.toLowerCase())
    }
  );

  const handleChange = e => {
    setSearchField(e.target.value);
  };         
  return (
    <Container>
      {/* 绑定value实现受控组件，避免状态异常 */}
      <input 
        type='search' 
        onChange={handleChange} 
        value={searchField}
        placeholder="搜索笔记标题"
      />
      {/* 若子组件Notess接收的渲染属性不是filter，修改为对应的属性名即可 */}
      <Notess filter={filteredNote} />
    </Container>          
  ) 
}

额外排查点 #

如果修改后仍不生效，打开控制台检查是否有报错，同时确认details属性传入的值是包含title字段的对象数组，子组件Notess内部是读取你传入的属性渲染列表。

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