ReactJS实现嵌套二维数组实时名称搜索 运行报ChunkLoadError

现有代码的必现错误 #

• 筛选逻辑失配：items[f][1]是存储子项对象的数组，不能直接对其调用字符串includes()方法做搜索匹配
• 未定义变量引用：循环内results.push(result)中的result没有做任何声明赋值，会直接触发ReferenceError，导致组件运行中断
• JSX标签不匹配：子项渲染部分用<h3>开标签、</h1>闭标签，违反JSX语法规则，直接触发解析错误
• 冗余状态设计：不需要单独维护searchResults状态，直接基于搜索词计算筛选结果即可，减少不必要的状态更新开销

ChunkLoadError的常见触发原因 #

这个报错通常不是搜索逻辑本身直接导致的，常见场景包括：

• 本地开发服务运行期间修改了代码分割、分包相关配置，生成的chunk文件hash值更新后，页面仍加载旧的失效资源地址
• 组件运行时抛出的未捕获异常（比如上面提到的ReferenceError、JSX解析错误）中断了组件树加载，被构建工具的错误链路误判为chunk加载失败
• 生产构建时代码分割策略不合理，极小的运行时错误被拦截后触发chunk加载失败的兜底提示

修正后的可运行代码 #

import React from 'react';
// 引入项目内已有的滚动容器组件
import ScrollContainer from './ScrollContainer';

export default function Page({ items }) {
  const [searchTerm, setSearchTerm] = React.useState("");
  
  // 实时计算筛选结果，替代冗余的searchResults状态
  const searchResults = React.useMemo(() => {
    const trimmedKeyword = searchTerm.trim();
    // 搜索词为空时直接返回全量列表
    if (!trimmedKeyword) return items;

    return items.reduce((acc, [categoryName, categoryChildren]) => {
      // 过滤当前分类下名称匹配的子项，忽略大小写匹配
      const matchedItems = categoryChildren.filter(item => 
        item.name.toLowerCase().includes(trimmedKeyword.toLowerCase())
      );
      // 仅当分类下存在匹配子项时，才将该分类加入结果列表
      if (matchedItems.length) {
        acc.push([categoryName, matchedItems]);
      }
      return acc;
    }, []);
  }, [items, searchTerm]);

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  }

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        value={searchTerm}
        onChange={handleChange}
      />
      {searchResults.map((category, categoryIndex) => (
        <div key={categoryIndex}>
          <h2>{category[0]}</h2>
          <ScrollContainer> 
            {category[1].map((item, itemIndex) => (
              <h3 key={itemIndex}>{item.name}</h3>
            ))}
          </ScrollContainer>
        </div>
      ))}
    </div>
  )
}

快速排查ChunkLoadError的操作步骤 #

• 先清除浏览器本地缓存、重启本地开发服务，排除chunk资源hash不匹配的偶发问题
• 打开浏览器控制台查看具体的运行时报错，优先修复前面提到的未定义变量、JSX标签不匹配的必现错误，这类未捕获的异常通常是触发ChunkLoadError的直接诱因
• 如果是生产环境出现该报错，检查是否有旧版本的页面地址被用户缓存，可通过配置资源hash、添加chunk加载失败的兜底重试逻辑解决

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