旧Android浏览器中React数组映射显示异常，疑ES3兼容求Webpack配置

嘿，这个问题我之前在维护兼容旧Android浏览器的项目时踩过坑！旧版Android（尤其是4.4及更早的版本）的内置浏览器确实是ES3/早期ES5环境，很多ES6+语法和API的支持有隐藏bug，哪怕你以为Webpack+Babel已经处理了，可能还是有配置遗漏。结合你的问题，给你整理了具体的配置调整建议：

1. 精准配置Babel的目标环境 #

首先要明确告诉Babel需要兼容的旧版Android浏览器，默认的@babel/preset-env目标配置可能没覆盖到这么老的环境。修改你的babel.config.js（或.babelrc）：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        android: '4.4', // 明确指定你需要兼容的最旧Android版本
        browsers: ['last 2 versions', 'ie >= 10'] // 可保留通用兼容配置
      },
      useBuiltIns: 'usage', // 自动按需导入polyfill，避免冗余
      corejs: 3 // 需要先安装core-js@3依赖
    }],
    '@babel/preset-react' // React项目务必添加这个预设
  ]
};

这里的核心是android: '4.4'让Babel针对性转译代码，useBuiltIns: 'usage'会自动给你用到的ES6+API（比如Array.prototype.map）补上兼容补丁。

2. 强制引入数组方法的Polyfill #

旧版Android浏览器的Array.prototype.map可能存在实现bug（比如处理空数组、this指向异常），甚至部分极端版本根本没有这个方法。你可以在项目入口文件（比如index.js）顶部手动导入完整的核心API补丁：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

这能确保所有ES6+的核心API都被兼容，不会漏掉数组方法这类基础功能。

3. 检查Webpack的Target配置 #

确保Webpack的target设置为web（默认值，但自定义配置可能被修改），避免因为目标环境错误导致浏览器API处理异常：

// webpack.config.js
module.exports = {
  target: 'web',
  // ...其他配置项
};

4. 临时替换箭头函数排查问题 #

虽然Babel应该自动转译箭头函数，但如果配置有疏漏，箭头函数可能没被处理。你可以先把你的map代码改成普通函数测试：

{objects.map(function(object) {
  return <Data key={object.key} info={object} />;
})}

如果修改后恢复正常，说明你的Babel转译箭头函数的配置没生效，需要回头检查@babel/preset-env的配置是否正确加载。

额外排查：状态更新的不可变性 #

另外，旧浏览器下数组突增的问题，也有可能是状态更新逻辑的问题——比如你用了array.push()直接修改原数组（React状态要求不可变更新），而旧浏览器的数组方法行为和现代浏览器有差异。确保状态更新用不可变方式：

// 正确的状态更新方式
setObjects([...newObjects]); // 用扩展运算符创建新数组
// 或者
setObjects(Object.assign([], newObjects));

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