React面包屑组件报TypeError: bcLi.push(...) is not a function如何解决

你代码中存在4处语法/逻辑错误，修改后即可正常运行：

1. 错误调用数组push方法：bcLi.push()(<li ...>) 写法错误，push()执行后返回的是数组长度（数字类型），后续加括号相当于把数字作为函数调用，直接抛出类型错误。正确写法是直接把JSX元素作为参数传入push方法：bcLi.push(<li ...>)
2. 循环元素key值写死：遍历生成的列表项key固定为1，会触发React的key唯一警告，改为用循环索引i作为key即可
3. 类名拼写错误：激活状态的li标签className写为breadrumb-item，多写了一个r，正确为breadcrumb-item
4. 导航属性重复前缀：nav标签的属性写为aria-aria-label，多了一层aria-前缀，正确为aria-label
   另外如果你的./data文件没有导出crumbs变量，也会触发变量未定义报错，可先打开代码中注释的本地crumbs数组测试运行。

修正后完整代码 #

import './BreadCrumb.css';
import {crumbs} from './data';
// 若data文件引入报错，可取消下方注释使用本地测试数据
// const crumbs = ["Home","Service","Suche"];

function BreadCrumb() {
  let bcLi = [];
  for (let i = 0; i < crumbs.length - 1; i++) {
    bcLi.push(<li className="breadcrumb-item" key={i}>{crumbs[i]}</li>);
  }
  bcLi.push(<li className="breadcrumb-item active" key={crumbs.length-1} 
  aria-current="page">{crumbs[crumbs.length-1]}</li>);

  return (
    <div className="bcd">
      <nav aria-label="breadcrumb">
        <ol className="breadcrumb">
          {bcLi}
        </ol>
      </nav>
    </div>
  );
}

export default BreadCrumb;

• 优先看报错堆栈的行号定位：开发环境的报错信息都会标注出错的具体文件和行号，先跳转到对应行排查基础语法错误，比如括号是否多写漏写、符号是否用错、变量名/方法名是否拼写错误
• 逐步注释缩小范围：如果定位不到具体错误，可以逐段注释代码，直到注释某段后报错消失，即可确定错误范围在该段代码内
• 优先查官方文档：框架、库相关的报错信息直接查对应官方文档的错误说明，比零散的第三方案例更准确，也能避免旧版本代码不兼容的问题
• 最小可复现测试：遇到引入外部资源/模块的报错，可以先写最小测试用例验证，比如不确定引入的crumbs是否有效，可以先打印crumbs的值，或者用本地模拟数据替换测试

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