React函数组件中如何连续调用setState并获取更新后状态

我知道setState是异步调用的，在React函数组件里，想在setState执行后立刻用更新后的状态，但现在拿到的还是旧值。查了很多方案大多是类组件的，类组件的setState有第二个参数当回调，那函数组件该怎么处理？有哪些解决方法？

以下是我的代码，我想在setFiltersAdded后立即使用更新后的filtersAdded状态来更新其他状态：

const { data, setData } = useContext(defaultData);
const [pestleFilters, setPestleFilters] = useState([]);
const [filtersAdded, setFiltersAdded] = useState([]);
let flag = 0;
let availableFilters = [];
const [toggleFilter, setToggleFilter] = useState(false);

const addFilter = (val) => {
  let filters = [...filtersAdded];
  filters.push(val);
  setFiltersAdded(filters);
  let pestleFiltersAux = [...pestleFilters].filter((item) => {
    if (!filters.includes(item)) {
      return { item };
    }
  });
  setPestleFilters(pestleFiltersAux, () => {
    console.log(filtersAdded);
  });

  let temp = data.filter((d) => filtersAdded.includes(d.pestle));
  console.log(temp);
};

核心问题分析 #

函数组件的useState不像类组件的setState支持第二个回调参数，而且状态更新是异步批量处理的，所以在调用setFiltersAdded后直接访问filtersAdded，拿到的还是更新前的旧值。下面是几种可行的解决方法：

方法1：直接使用更新后的临时变量

你已经在代码里生成了更新后的filters变量，完全可以直接用这个临时变量代替filtersAdded做后续操作，无需等待状态更新：

修改后的addFilter函数：

const addFilter = (val) => {
  const filters = [...filtersAdded, val]; // 直接生成新数组，简化写法
  setFiltersAdded(filters);
  
  // 用filters代替filtersAdded计算pestleFiltersAux
  const pestleFiltersAux = pestleFilters.filter(item => !filters.includes(item));
  setPestleFilters(pestleFiltersAux);
  
  // 同样用filters过滤数据
  const temp = data.filter(d => filters.includes(d.pestle));
  console.log(temp);
};

这种方式最简单，避免了异步状态的依赖问题，因为你已经拿到了最新的状态值（临时变量filters）。

方法2：用useEffect监听状态变化

如果后续逻辑必须依赖更新后的状态值，可以通过useEffect监听filtersAdded的变化，当状态更新时自动执行对应逻辑：

// 新增useEffect监听filtersAdded
useEffect(() => {
  // 这里的filtersAdded是更新后的最新值
  const pestleFiltersAux = pestleFilters.filter(item => !filtersAdded.includes(item));
  setPestleFilters(pestleFiltersAux);
  
  const temp = data.filter(d => filtersAdded.includes(d.pestle));
  console.log(temp);
}, [filtersAdded, pestleFilters, data]); // 依赖项数组，确保相关值变化时触发

// 简化addFilter函数，只负责更新filtersAdded
const addFilter = (val) => {
  // 用函数式更新更安全，确保拿到最新的前状态
  setFiltersAdded(prevFilters => [...prevFilters, val]);
};

注意这里用函数式更新setFiltersAdded(prevFilters => [...prevFilters, val])，比直接展开旧状态更可靠，尤其是在频繁触发更新的场景下，能避免因为闭包导致的旧状态快照问题。

方法3：用useReducer管理复杂状态逻辑

如果你的状态更新逻辑涉及多个关联状态（比如filtersAdded和pestleFilters相互依赖），可以用useReducer把所有状态更新逻辑集中管理，彻底避免异步状态的问题：

// 定义reducer函数，处理所有状态更新逻辑
const filterReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_FILTER':
      const newFiltersAdded = [...state.filtersAdded, action.payload];
      const newPestleFilters = state.pestleFilters.filter(item => !newFiltersAdded.includes(item));
      const filteredData = action.data.filter(d => newFiltersAdded.includes(d.pestle));
      console.log(filteredData);
      
      return {
        ...state,
        filtersAdded: newFiltersAdded,
        pestleFilters: newPestleFilters
      };
    default:
      return state;
  }
};

// 在组件中初始化useReducer
const initialState = {
  pestleFilters: [],
  filtersAdded: []
};

const [state, dispatch] = useReducer(filterReducer, initialState);
const { data, setData } = useContext(defaultData);
let flag = 0;
let availableFilters = [];
const [toggleFilter, setToggleFilter] = useState(false);

// 修改addFilter，通过dispatch触发状态更新
const addFilter = (val) => {
  dispatch({ type: 'ADD_FILTER', payload: val, data });
};

这种方式适合状态逻辑复杂的场景，把所有相关的状态计算和更新都放在reducer里，逻辑更清晰，也不会出现异步状态的问题。

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