React中useState状态更新滞后一步问题求助

你遇到的滞后问题，本质是React的setState是异步操作——调用setDayFiltered、setShiftFiltered、setCurrentSort后，组件的state不会立刻更新，所以紧接着调用showFilteredList时，读取的还是旧的state值，判断自然会慢一步。下面是两种可行的解决方法：

方案一：直接使用传入的参数判断 #

既然searchAndFilter已经拿到了最新的筛选参数，直接用这些参数判断就行，不用等state更新：

const [showFiltered, setShowFiltered] = useState(false);
const [dayFiltered, setDayFiltered] = useState("Filter-by-Day");
const [shiftFiltered, setShiftFiltered] = useState("Shift-Type");
const [currentSort, setCurrentSort] = useState("Sort");

const searchAndFilter = (day, shiftType, sort) => {
  setDayFiltered(day);
  setShiftFiltered(shiftType);
  setCurrentSort(sort);
  // 直接用传入的最新参数判断，跳过state异步更新的等待
  const shouldShow = day !== "Filter-by-Day" || shiftType !== "Shift-Type" || sort !== "Sort";
  setShowFiltered(shouldShow);
};

方案二：用useEffect监听筛选状态变化 #

更符合React状态管理逻辑的方式是，用useEffect监听三个筛选state的变化，当它们更新时自动判断是否显示过滤列表：

import { useState, useEffect } from 'react';

const [showFiltered, setShowFiltered] = useState(false);
const [dayFiltered, setDayFiltered] = useState("Filter-by-Day");
const [shiftFiltered, setShiftFiltered] = useState("Shift-Type");
const [currentSort, setCurrentSort] = useState("Sort");

const searchAndFilter = (day, shiftType, sort) => {
  setDayFiltered(day);
  setShiftFiltered(shiftType);
  setCurrentSort(sort);
};

// 监听三个筛选状态，只要有一个变化就自动更新showFiltered
useEffect(() => {
  const shouldShow = dayFiltered !== "Filter-by-Day" || shiftFiltered !== "Shift-Type" || currentSort !== "Sort";
  setShowFiltered(shouldShow);
}, [dayFiltered, shiftFiltered, currentSort]);

这个方案把状态判断和状态更新解耦，不用手动控制调用时机，只要筛选条件有变化就会自动触发判断逻辑。

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