React异步请求后首次setState赋值useState为空 需二次点击生效

你遇到的首次点击赋值为空、第二次点击才能拿到数据的问题，和接口请求无关（你在控制台能打印出正确响应已经证明请求链路正常），核心是React状态更新机制+闭包特性导致的认知偏差：

• React中useState返回的setter方法触发的状态更新不是同步生效的，调用setter后，当前组件渲染周期形成的闭包里，仍然会保留旧的状态值，只有等组件完成重渲染后，新的状态值才会在新的闭包中被读取到。
• 你在type === 'all'的分支里调用setDataToXLS后，如果立刻在后续同步代码中读取dataToXLS状态，第一次点击时读到的永远是该状态的初始空值；等第一次setter触发组件重渲染完成后，第二次点击时闭包捕获到的是第一次更新后的值，就会出现“点两次才正常”的假象。
• 额外可能的触发点：如果fetchUsers是被useCallback包裹，且依赖数组漏加了searchBox/perPage等用到的状态，也可能导致函数捕获旧值触发异常。

按优先级选择以下方案即可：

1. 绕开不必要的状态中转：如果type === 'all'的逻辑是拿数据做导出等一次性操作，直接使用接口返回的本地变量即可，完全不需要经过state存储：

   const response = await axiosClient(`/products`, config)
   if (type === 'all') {
     const exportSource = response.data.products.docs
     setDataToXLS(exportSource);
     // 直接用本地变量执行导出逻辑，不要读取state里的dataToXLS
     exportToExcel(exportSource)
   } 
   // 其余逻辑保持不变
   

2. 用副作用监听状态变化：如果必须依赖dataToXLS状态触发后续操作，把后续逻辑放到useEffect中，监听dataToXLS变化后再执行：

   // 组件内加副作用监听
   useEffect(() => {
     if (dataToXLS?.length) {
       exportToExcel(dataToXLS)
     }
   }, [dataToXLS])
   

3. 排查闭包依赖问题：如果fetchUsers用了useCallback缓存，把函数内用到的所有外部状态/实例（perPage、searchBox、axiosClient等）全部加到依赖数组中，避免捕获旧值。
4. 低级错误排查：确认dataToXLS对应的useState解构顺序正确，不要把state和setter的位置写反，正确写法为const [dataToXLS, setDataToXLS] = useState([])。

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