React中setSearchResults后状态未即时更新问题求助

这是因为React中useState的状态更新是异步批量执行的，调用setSearchResults(response)后，React不会立刻修改searchResults的值，而是将更新任务加入队列，等当前函数执行完毕、浏览器准备重绘时才会统一更新状态。所以在同一个onSubmit函数里，调用更新方法后立即打印searchResults，拿到的还是更新前的旧值。

解决方法： #

• 用useEffect监听状态变化：当searchResults更新完成后，useEffect会触发，此时可以获取到最新值并执行后续逻辑：

const [searchResults, setSearchResults] = useState({});
const [isLoading, setIsLoading] = useState(false);

// 监听searchResults变化
useEffect(() => {
  if (Object.keys(searchResults).length > 0) {
    console.log("更新后的searchResults:", searchResults);
    // 这里写需要使用最新searchResults的渲染或业务逻辑
  }
}, [searchResults]); // 依赖数组，只有searchResults变化时才执行

const onSubmit = async () => {
  try {
    setIsLoading(true);
    const response = await apiCall(formData);
    console.log("接口返回值:", response);
    setSearchResults(response);
  } catch (err) {
    showNotification.error(err.message);
  } finally {
    setIsLoading(false);
  }
};

• 直接在组件渲染中使用：React会在状态更新后自动重新渲染组件，你可以直接在JSX中使用searchResults，比如：

return (
  <div>
    {isLoading ? <div>加载中...</div> : (
      <div>
        {/* 直接使用更新后的searchResults */}
        {JSON.stringify(searchResults)}
      </div>
    )}
  </div>
);

• 如果只是验证更新是否成功：既然你已经确认response是正常的，只要setSearchResults(response)调用没有报错，状态最终会更新，无需立刻打印。

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