React使用useState更新状态时filteredData仅第二次点击生效问题求助

AI 小北

2026-10-6

问题根因

React的状态更新是批量异步执行的，你在handleCategory中调用setCategory(res.data)后，当前函数作用域内的category变量还是更新前的旧值，筛选逻辑实际用的是上一次选中的分类，所以才会出现点击第二次才生效的滞后问题。

修复方案

方案1：直接用传入的新分类值筛选（最简修改）

不需要依赖刚更新的category状态，直接用拿到的新值做筛选：

const handleCategory = (res) => {
  const newCategory = res.data;
  setCategory(newCategory);
  const filter = projectData.filter((data) => data.category === newCategory);
  setFilteredData(filter);
};

方案2：用useEffect监听状态自动筛选（逻辑更解耦）

把筛选逻辑和分类更新拆分开，只要分类或者源数据变化就自动重新筛选，后续维护更灵活：

const langs = ["react", "next js", "material-ui", "tailwind css", "firebase"];

const [projectData, setProjectData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [category, setCategory] = useState("");

// 注意：原依赖数组为空，若props.projs后续会更新，需把projs加入依赖
useEffect(() => {
  setProjectData(projs);
}, [projs]);

// 新增监听逻辑，category或projectData变化时自动重新筛选
useEffect(() => {
  const filter = projectData.filter((data) => data.category === category);
  setFilteredData(filter);
}, [projectData, category]);

const handleCategory = (res) => {
  setCategory(res.data);
};