React：useEffect内无法更新useState状态的问题求助

问题原因 #

1. React状态更新是异步的：setSearchFilter 是异步操作，调用后不会立刻修改 searchFilter 的值，所以紧接着的 console.log 只能拿到更新前的旧状态。
2. 闭包陷阱：你的 useEffect 依赖为空数组，只会执行一次，此时 parseQueryParams 函数捕获的是组件初始渲染时的 searchFilter（值为 {transactionId: null}），后续即使状态更新，这个函数里的 searchFilter 依然是旧值。

解决方法 #

1. 使用函数式更新避免闭包问题

当状态更新依赖于之前的状态时，改用函数式的状态更新方式，确保获取到最新的状态值：

setSearchFilter(prevState => ({ ...prevState, ...queryObj }));

2. 通过 useEffect 监听状态变化查看最新值

如果需要确认状态是否更新成功，不要在 setSearchFilter 后直接打印，而是通过 useEffect 监听 searchFilter 的变化：

React.useEffect(() => {
  console.log(searchFilter.transactionId); // 状态更新后会打印最新值
}, [searchFilter]);

3. 确保依赖正确，处理URL变化场景

如果需要在URL的查询参数变化时重新解析，要把 queryStr 加入 useEffect 的依赖数组，这样当 location.search 变化时，useEffect 会重新执行：

React.useEffect(() => {
  parseQueryParams();
}, [queryStr]);

修改后的完整代码 #

interface TransactionSearchFilter {
   transactionId?: number;
}

const TransactionList: React.FC = (props) => {
  const queryStr = location.search.substring(1);
  const [searchFilter, setSearchFilter] = React.useState<TransactionSearchFilter>({
    transactionId: null,
  });

  const parseQueryParams = () => {
    const queryObj = QueryString.parse(queryStr);
    console.log(queryObj.transactionId); // 输出10
    // 函数式更新状态
    setSearchFilter(prevState => ({ ...prevState, ...queryObj }));
  };

  React.useEffect(() => {
    parseQueryParams();
  }, [queryStr]);

  // 监听状态变化，打印最新值
  React.useEffect(() => {
    console.log(searchFilter.transactionId); // 状态更新后输出10
  }, [searchFilter]);

  return (<div>Hello World</div>);
};

export default TransactionList;

内容的提问来源于stack exchange，提问作者Jonas Bikus