Android WebView 中 React useState 更新失效问题

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 示例

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);
    };
 }