TypeScript函数组件中ESLint提示'.map缺失props验证'如何修复？

你碰到的paymentListData.map和paymentListData.length的ESLint报错，来自react/prop-types规则——这个规则默认要求用prop-types库做props校验，但你已经用TypeScript的Props类型完成了类型约束，两者冲突导致报错。下面是适配TS函数组件的修复方法：

方案一：禁用react/prop-types规则（推荐） #

TypeScript本身已经提供了严格的类型检查，完全可以替代prop-types的作用，直接禁用这个规则最省事：

1. 全局禁用：修改项目根目录的ESLint配置文件（比如.eslintrc.js），在rules字段中添加：

module.exports = {
  // 其他配置项...
  rules: {
    "react/prop-types": "off"
  }
};

2. 局部禁用：如果只想针对当前组件禁用，在组件文件最顶部添加注释：

/* eslint-disable react/prop-types */
type Props = {
  paymentListData: PaymentState[];
};

const PaymentList = ({ paymentListData }: Props) => {
  // 组件内容...
};

方案二：用prop-types配合TS类型（不推荐） #

如果一定要保留react/prop-types规则，可以安装依赖并手动同步TS类型与prop-types定义：

1. 安装依赖：

npm install prop-types @types/prop-types --save-dev

2. 在组件中添加prop-types定义：

import PropTypes from 'prop-types';

type Props = {
  paymentListData: PaymentState[];
};

const PaymentList = ({ paymentListData }: Props) => {
  // 组件内容...
};

PaymentList.propTypes = {
  paymentListData: PropTypes.arrayOf(PropTypes.shape({
    // 这里需要手动定义PaymentState的结构，比如paymentId等字段
    paymentId: PropTypes.string.isRequired,
    // 其他字段...
  })).isRequired
};

这种方法需要手动维护TS类型和prop-types的同步，容易出现不一致，TS项目中不推荐使用。

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