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);};}
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2530858.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!