Android WebView 中 React useState 更新失效问题

Evavava啊2026-04-18 11:37

1. 问题

在 Android App 内嵌的 H5 页面（React）中：

打开文件选择器上传图片后，页面所有 useState 的更新（如 setLoading、setRecordList）都不生效
接口返回数据正常，但页面不渲染
原生 DOM 操作正常
使用 Zustand/Redux/Context 管理状态时正常
iOS 正常

2. 问题原因

Android WebView 的底层渲染 Bug

触发条件：打开文件选择器（<input type="file">）后返回页面
WebView 在 onPause() → onResume() 后，渲染引擎进入异常状态
组件内部的 useState 更新被无限期挂起，无法提交到 DOM
Context/Redux/Zustand 走的是独立的订阅-通知机制，绕过了这个问题

更新方式	是否失效
useState / useReducer	❌ 失效
Context / Zustand / Redux	✅ 正常
原生 DOM 操作	✅ 正常

3. 解决方案

将组件本地状态迁移到全局状态管理库

使用 Zustand 示例

javascript 复制代码

import { useEffect, useRef, useState, useContext } from 'react';
import { APP_CONTEXT } from '@/server/store';

export default function App({}) {
  // const [recordList, setRecordList] = useState([]);
   const {
        state: { recordList },
        dispatch,
    } = useContext(APP_CONTEXT);
}
 const getFirstPageData = async () => {
        // 请求第一页数据
        setLoading(true);
        const res = await getGrowthRecordListApi();
        // setRecordList(res.list);
        dispatch({ recordList: res.list });
        setLoading(false);
    };
 }