如何获取useState更新后的值并在其他函数中使用？

问题原因 #

React中useState的setter函数是异步执行的，调用setSelected后，组件不会立刻重新渲染，当前作用域内的selected变量依然是更新前的旧值，所以verifyActive里打印的是未更新的状态。

解决方案 #

方案一：直接传递更新后的状态值

在调用setSelected前先计算出新的状态对象，然后把这个新对象传给verifyActive，这样不需要依赖组件状态，直接拿到最新值：

const setActive = (value) => {
  const newSelected = { ...selected, b: value };
  setSelected(newSelected);
  verifyActive(newSelected);
};

const verifyActive = (newSelected) => {
  console.log('selected', newSelected); // 获取到更新后的值
};

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

如果verifyActive需要在selected每次更新时自动执行，可以通过useEffect监听selected的变化，当状态更新时触发函数：

import { useState, useEffect } from 'react';

const [selected, setSelected] = useState({ a: '', b: '' });

useEffect(() => {
  verifyActive();
}, [selected]); // 仅当selected变化时执行

const setActive = (value) => {
  setSelected({ ...selected, b: value });
};

const verifyActive = () => {
  console.log('selected', selected); // 此时selected为更新后的值
};

方案三：使用函数式更新（避免闭包问题）

如果你的状态更新逻辑依赖之前的状态，建议使用函数式更新来确保拿到最新的状态值，这能避免闭包导致的旧状态引用问题：

const setActive = (value) => {
  // 用prev参数获取最新的状态
  setSelected(prevSelected => ({ ...prevSelected, b: value }));
};

如果需要在更新后执行verifyActive，可以结合方案一，把函数式更新返回的新值传递过去：

const setActive = (value) => {
  setSelected(prevSelected => {
    const newSelected = { ...prevSelected, b: value };
    verifyActive(newSelected);
    return newSelected;
  });
};

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