搜索框输入无过滤结果求助：API未触发重新请求

核心问题1：API请求未随搜索值更新触发 #

你的第一个useEffect依赖数组是[]，这意味着它只会在组件首次挂载时执行一次。后续value变化时，不会重新发起API请求，自然拿不到新数据。

核心问题2：未使用过滤后的数据渲染 #

你在渲染时传给<Postsabc>的是原始的data数组，而不是过滤后的filteredPosts，所以就算过滤逻辑生效，页面也不会展示过滤结果。

修复后的代码 #

const Posts = ({ value }) => {
  const [filteredPosts, setFilteredPosts] = useState([]);
  const [data, setData] = useState([]);

  // 修改：将value加入依赖数组，value变化时重新请求API
  useEffect(() => {
    axios.get(`${process.env.BASE_URL}/search?q=${value}`).then(res=>{
      console.log(res.data.posts);
      setData(res.data.posts);
    });
  }, [value]) // 这里添加value作为依赖

  useEffect(() => {
    setFilteredPosts(data?.filter(post => post.title.toLowerCase().includes(value.toLowerCase())));
  }, [value, data]);

  return (
    <div>
      {/* 修改：传递filteredPosts给Postsabc组件 */}
      {data?.length > 0 && filteredPosts &&  
        <Postsabc posts={filteredPosts} />
      }
    </div>
  );
};

export default Posts;

额外优化建议 #

• 给API请求添加防抖逻辑，避免输入过程中频繁发起请求（可通过setTimeout和clearTimeout实现）
• 补充请求错误捕获，比如在axios.get后添加.catch()处理异常，避免请求失败导致页面无响应

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