我的博客搜索栏不显示已过滤的博客

Question

这是我的代码，我无法从搜索栏中获得任何结果。

const RecentBlogs = ({recentBlogs}) => {

const [query, setQuery] = useState("")
const filteredItems = (() => {
    if(!query) return recentBlogs.filter(item =>{
        return item.title.toLowerCase().includes(query.toLowerCase())
    })
    
}, [recentBlogs, query])


    return ( 
        <div className="recent-blogs">
            <h2 className="recent"> Recent Blogs</h2>
            <div className="bloglist">
                    {recentBlogs.map((blog) => (
                         <div className="blog-preview" key={blog.id}>
                            <Link to ={`/blogs/${blog.id}` }> 
                            <h2>{blog.title}</h2>
                            <h3>{blog.author}:</h3>
                            <p>{blog.desc}</p>
                            </Link>
                         </div>   
                    ))}
                
            </div>

            <input
             value={query}
             onChange={e => setQuery(e.target.value)}
             type="search" placeholder="Search" className="search-bar"/>
             <h3>Items: </h3>
             {filteredItems.map(item => (
                <div>{item.title}</div>
             ))}


        </div>
     );
}

我试图过滤博客中的文字，但我做不到。控制台没有显示任何与此相关的错误。我是初学者，我很乐意为您提供帮助。

Answer 1

使用useeffect

const [filteredItems, setFilteredItems] = useState();
useEffect(() => {
  if (!query) {
    const filtered = recentBlogs.filter((i) =>
      i.title.toLowerCase().includes(query.toLowerCase())
    );
    setFilteredItems(filtered);
  }
}, [query, recentBlogs]);

或者您甚至可以通过将过滤器添加到地图中来实现它

 {recentBlogs.filter((i) =>
      i.title.toLowerCase().includes(query.toLowerCase())
    ).map((blog) => (......