React传递数组props时触发prop-types校验length缺失报错

云原生阿岚

2026-8-29

报错根因

这个报错本质是两个写法问题导致的：

你给传入的数组属性起名为props，和React组件默认接收的顶层props对象重名，ESLint的prop-types校验规则会把props.length识别为「访问props下名为length的属性」，而不是你传入的数组自带的length属性。
PropTypes和defaultProps类型不匹配：你声明传入的props是字符串数组，默认值却给了空字符串''，类型校验本身就不通过。

修复方案

优先推荐第一种写法，从根源上避免命名混淆：

方案1：修改传入属性名（推荐）

不要用props作为自定义传参的属性名，改成语义化的名称，比如emailList：

修改组件调用代码：

const eusers = ['Euser1@gmail.com', 'Euser2@yahoo.com'] 
<EnableUser emailList={eusers} />

修改组件定义和校验规则：

import PropTypes from 'prop-types';
import { useState } from 'react';

export default function EnableUser({ emailList }) {
  // 此时访问数组length不会触发ESLint报错
  const [emailCount, setEmailCount] = useState(emailList.length);

  // 其余组件逻辑
}

EnableUser.propTypes = {
  emailList: PropTypes.arrayOf(PropTypes.string),
}

EnableUser.defaultProps = {
  emailList: [], // 数组类型的默认值给空数组，和声明类型匹配
}

方案2：保留props作为属性名（不推荐）

如果一定要用props作为传入的属性名，修正PropTypes和默认值即可：

import PropTypes from 'prop-types';
import { useState } from 'react';

export default function EnableUser({ props }) {
  const [emailCount, setEmailCount] = useState(props.length);
  // 其余组件逻辑
}

EnableUser.propTypes = {
  props: PropTypes.arrayOf(PropTypes.string),
}

EnableUser.defaultProps = {
  props: [], // 替换原来的空字符串默认值
}