React中RangeError: Maximum call stack size exceeded问题求助

核心问题分析 #

你遇到的栈溢出错误，大概率和一次性渲染7000+条option到datalist有关：原生datalist不支持虚拟滚动，React渲染大量DOM节点时，会触发递归调用栈溢出；另外代码里还有几处状态更新的小问题可能加剧这个情况。

具体修复步骤 #

1. 优化大量数据的渲染

一次性渲染7000个option完全不合理，会触发严重性能问题甚至栈溢出，推荐两种方案：

• 方案一：改用支持虚拟滚动的第三方组件
  替换原生datalist为react-select这类组件，它只会渲染可视区域内的选项，彻底避免大量DOM节点堆积。

• 方案二：添加搜索过滤逻辑
  保留原生datalist，但只渲染匹配输入内容的选项，大幅减少渲染数量：

// 在OrdersForm组件中新增搜索状态
const [searchQuery, setSearchQuery] = useState("");

// 修改input的onChange事件，同时更新搜索关键词和表单状态
function handlechangeorders(e) {
  const { name, value } = e.target;
  setAddProduct((prev) => ({ ...prev, [name]: value }));
  if (name === "product") {
    setSearchQuery(value);
  }
}

// 过滤产品列表，只保留匹配关键词的项
const filteredProducts = productsList.filter(product => 
  product.name.toLowerCase().includes(searchQuery.toLowerCase())
);

// 修改datalist的渲染数据源
<datalist id="products-list">
  {filteredProducts.map((product) => (
    <option key={product.id} value={product.name} />
  ))}
</datalist>

2. 修复状态更新的错误

• 初始化productsList为空数组
  避免undefined导致的数组展开错误：

const [productsList, setProductsList] = useState([]);

• 修正新增产品的状态更新逻辑
  当前代码把空的addProduct对象加到列表里，应该替换为接口返回的真实产品数据：

const handleAddProductSubmit = (e) => {
  e.preventDefault();

  api
    .post(`${baseURL}api/orders/add-product/`, newProduct)
    .then((response) => {
      console.log(response.data);
      // 用接口返回的新产品数据更新列表
      setProductsList((prev) => [...prev, response.data]);
      // 重置新增产品表单
      setNewProduct({ name: "" });
    });
};

• 完善useEffect的依赖项
  避免闭包导致的请求异常：

useEffect(() => {
  api.get(`${baseURL}api/orders/products/`).then((response) => {
    setProductsList(response.data);
  });
}, [api, baseURL]); // 添加api和baseURL作为依赖

3. 优化ProductForm的状态更新

使用函数式更新保证状态的正确性：

// ProductForm组件的input onChange事件
onChange={(e) => setNewProduct(prev => ({ ...prev, name: e.target.value }))}

验证效果 #

先修复状态更新的错误，再添加搜索过滤或虚拟滚动，就能解决栈溢出问题，同时大幅提升组件的响应速度。

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