React项目ESLint提示Missing props in validation，改用PropTypes.checkPropTypes仍未解决

架构老林

2026-10-2

问题原因

最初触发Calling PropTypes validators directly报错，根本不是要求你改用PropTypes.checkPropTypes写校验，而是你原来的propTypes定义存在语法错误：
- 校验数组元素类型应该用PropTypes.arrayOf()，你错用成了PropTypes.array()直接传入验证器，相当于直接调用了验证器函数
- PropTypes.shape()要求传入对象格式的属性校验规则，你直接传入了两个独立的验证器作为参数，也触发了直接调用验证器的逻辑
后续ESLint报Missing props in validation，是因为ESLint的react/prop-types规则只会识别绑定在组件构造函数/函数组件上的Component.propTypes静态属性的校验逻辑，你手动定义myPropTypes变量+调用PropTypes.checkPropTypes的写法不在规则的识别范围内，ESLint认为你没有给组件写prop校验。

修复方案

放弃手动调用PropTypes.checkPropTypes的写法，组件标准的prop校验直接绑定到组件的propTypes属性即可，checkPropTypes是提供给非组件场景做自定义校验的工具方法，不适合替代组件原生的propTypes定义。
修正原来propTypes里的语法错误即可，修正后的代码如下：

Ingredient.propTypes = {
  ingredientsTouched: PropTypes.bool,
  ingredientItem: PropTypes.string,
  // 修正array为arrayOf
  data: PropTypes.arrayOf(PropTypes.string),
  text: PropTypes.string,
  ingredientSetItem: PropTypes.bool,
  ingredientIsInValid: PropTypes.arrayOf(
    // 修正shape的参数为对象格式，根据你的实际业务属性调整key名即可
    PropTypes.shape({
      valid: PropTypes.bool,
      message: PropTypes.string
    })
  )
}