React组件输入值传递函数失效：标签搜索功能异常

核心问题 #

你的代码存在两个关键问题：

1. useState异步更新导致状态滞后：setSearchText是异步操作，在handleSearchChange中调用setSearchText(e.target.value)后立刻执行fetchPosts，此时searchText还未完成更新，fetchPosts拿到的仍是旧的空值，导致请求的是/api/post而非带标签的接口。
2. 事件监听逻辑错误：onChange事件仅响应输入内容变化，无法捕获键盘按键操作，你需要单独监听键盘事件来处理回车触发搜索的逻辑。

你提到修改后出现searchQuery undefined的问题，大概率是修改时变量名拼写错误，比如误将searchText写成了searchQuery。

修复后的代码 #

"use client";

import { useState, useEffect } from "react";

import PostCard from "./PostCard";

const PostCardList = ({ data, handleTagClick }) => {
  return (
    <div className='mt-16 prompt_layout'>
      {data.map((post) => (
        <PostCard
          key={post._id}
          post={post}
          handleTagClick={handleTagClick}
        />
      ))}
    </div>
  );
};

const Feed = () => {
  const [posts, setPosts] = useState([]);
  const [searchText, setSearchText] = useState("");

  const fetchPosts = async (searchQuery) => {
    console.log(`searchText: ${searchQuery}`);

    let url = '/api/post';
    if (searchQuery) {
      url = `/api/post/tag/${searchQuery}`;
    }

    const response = await fetch(url);
    const data = await response.json();

    setPosts(data);
  };

  useEffect(() => {
    fetchPosts("");
  }, []);

  const handleSearchChange = (e) => {
    setSearchText(e.target.value);
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      fetchPosts(e.target.value);
    }
  };

  return (
    <section className='feed'>
      <form className='relative w-full flex-center'>
        <input
          type='text'
          placeholder='Search for a tag or a username'
          value={searchText}
          onChange={handleSearchChange}
          onKeyDown={handleKeyDown}
          required
          className='search_input peer'
        />
      </form>

      <PostCardList
          data={posts}
          handleTagClick={() => {}}
        />
    </section>
  );
};

export default Feed;

关键改动说明 #

• 拆分事件处理：将输入内容更新和回车搜索逻辑拆分为两个独立函数，handleSearchChange仅负责更新searchText状态，handleKeyDown专门监听回车事件，避免异步更新的冲突。
• 直接传递最新输入值：回车触发搜索时，直接将e.target.value作为参数传入fetchPosts，绕开异步更新的state，确保拿到的是最新的输入内容。
• 统一初始请求逻辑：useEffect中调用fetchPosts时传入空字符串，与后续搜索逻辑保持一致。

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