React中用filter()实现标题搜索报错：filter不是函数求助

核心错误原因 #

你调用filter()的对象是字符串类型的search状态，而字符串并没有filter()方法——filter是数组的专属方法，这就是报错的直接原因。你的search状态仅用来存储用户输入的搜索关键词，真正需要过滤的是你的帖子数据数组。

修正步骤 #

1. 添加存储原始数据的状态
   你需要一个状态来保存所有帖子数据（比如从API获取的列表），示例：

   const [posts, setPosts] = useState([]);
   

   可以通过useEffect从接口获取数据并初始化这个状态：

   useEffect(() => {
     // 示例：从公共接口获取测试数据
     fetch('https://jsonplaceholder.typicode.com/photos')
       .then(res => res.json())
       .then(data => setPosts(data));
   }, []);
   

2. 修改渲染逻辑，对数据数组执行过滤
   将原来的search.filter改为对posts数组执行过滤，用search的值作为匹配条件：

   {
     posts.filter((val) => {
       // 搜索框为空时返回所有数据
       if (search === '') {
         return true;
       }
       // 匹配标题（忽略大小写）
       return val.title.toLowerCase().includes(search.toLowerCase());
     }).map((val) => (
       <div className="col-md-3 animated fadeIn " key={val.id}> {/* 用数据唯一ID做key更稳定 */}
         <div className="card" style={{padding:'10px'}}> 
           <center><h5 className='card-title card-text p-3 mb-2 bg-danger text-white'>Post no.:- {val.id}</h5></center> 
           <div className="card-body"> 
             <div className="avatar"> 
               <img 
                 src={val.thumbnailUrl}
                 className="card-img-top"
                 alt={val.title} {/* 补充图片alt文本，提升可访问性 */}
               />
             </div> 
             <p className="card-text p-3 mb-2 bg-success text-white"> 
               <br /> 
               <h6>Title:{val.title}</h6> 
             </p> 
           </div> 
           <div> 
             <center><button onClick={(e) => commentClick(e)} className="btn btn-primary btn-sm" >Comments</button></center>  
           </div> 
         </div> 
       </div> 
     ))
   }
   

额外注意点 #

• 原代码中else if分支没有返回值，会导致匹配成功的数据被过滤掉，修正后直接返回匹配结果即可。
• 避免用数组索引作为map的key，优先使用数据的唯一标识（如val.id），防止列表渲染时出现异常。

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