Android WebView 中 React useState 更新失效问题

张开发
• 2026/4/18 18:23:18 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Android WebView 中 React useState 更新失效问题
1. 问题在 Android App 内嵌的 H5 页面React中打开文件选择器上传图片后页面所有useState的更新如setLoading、setRecordList都不生效接口返回数据正常但页面不渲染原生 DOM 操作正常使用 Zustand/Redux/Context 管理状态时正常iOS 正常2. 问题原因Android WebView 的底层渲染 Bug触发条件打开文件选择器input typefile后返回页面WebView 在onPause()→onResume()后渲染引擎进入异常状态组件内部的useState更新被无限期挂起无法提交到 DOMContext/Redux/Zustand 走的是独立的订阅-通知机制绕过了这个问题更新方式是否失效useState / useReducer❌ 失效Context / Zustand / Redux✅ 正常原生 DOM 操作✅ 正常3. 解决方案将组件本地状态迁移到全局状态管理库使用 Zustand 示例import{useEffect,useRef,useState,useContext}fromreact;import{APP_CONTEXT}from/server/store;exportdefaultfunctionApp({}){// const [recordList, setRecordList] useState([]);const{state:{recordList},dispatch,}useContext(APP_CONTEXT);}constgetFirstPageDataasync(){// 请求第一页数据setLoading(true);constresawaitgetGrowthRecordListApi();// setRecordList(res.list);dispatch({recordList:res.list});setLoading(false);};}

更多文章