React：检查器不是函数

Question

我在 React 应用程序的控制台中收到这条奇怪的警告消息。

Warning: Failed propType: checker is not a function Check the render method of Chart.

我根本没有任何检查方法。如果我删除我的 propTypes，警告就会消失。有什么想法吗？

我的反应组件：

var Chart = React.createClass({
  //...
  propTypes: {
    legend: React.PropTypes.bool,
    max: React.PropTypes.number,
    min: React.PropTypes.number,
    series: React.PropTypes.arrayOf(
      React.PropTypes.shape({
        label: React.PropTypes.string,
        values: React.PropTypes.arrayOf(
          React.PropTypes.arrayOf(
            React.PropTypes.oneOfType(
              React.PropTypes.number,
              React.PropTypes.object // Date
            )
          )
        ),
        colorIndex: React.PropTypes.string
      })
    ).isRequired,
    threshold: React.PropTypes.number,
    type: React.PropTypes.oneOf(['line', 'bar', 'area']),
    units: React.PropTypes.string,
    xAxis: React.PropTypes.arrayOf(React.PropTypes.string)
  },
  render: function() {
    return (<svg>...</svg>);
  }
  //...
});

我发送到图表组件的负载是这个：

var series = [
  {label: 'first', values: [[5,2], [4,3], [3,3], [2,2], [1,1]], colorIndex: "graph-1"},
  {label: 'second', values: [[5,3], [4,2], [3,0], [2,0], [1,0]], colorIndex: "graph-2"}
];

Answer 1

改变

React.PropTypes.oneOfType(React.PropTypes.number, React.PropTypes.object)

至

React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object])

(参数应该是一个数组)

Answer 2

拉取请求已合并到 React 存储库中，以便在此类错误再次发生时为开发人员提供更好的反馈。

现在，验证消息将如下所示：

Invalid argument supplied to oneOf, expected an instance of array.

https://github.com/facebook/react/pull/3963

这应该是 React 0.14 的一部分。

Answer 3

FWIW，我得到 Failed PropType: typeChecker is not a function。我注意到在我的 PropTypes.arrayOf() 属性中，我传入了 PropTypes 的对象，例如PropTypes.arrayOf({}) 而不是传入 PropTypes.shape() 例如PropTypes.arrayOf(PropTypes.shape({})

进行此更改消除了错误消息。

Answer 4

在我的例子中，当我对一个复杂的对象使用形状函数时，我得到了这个。解决方案是从：

outerObject: shape({
  firstInnerObject: {
    a: string,
    b: string,
  },
  secondInnerObject: {
    a: string,
    b: number,
  },
}),

收件人：

outerObject: shape({
  firstInnerObejct: shape({
    a: string,
    b: string,
  }),
  secondInnerObject: shape({
    a: string,
    b: number,
  }),
}),

非常琐碎，我知道，但这可能是像我一样缺乏经验的人的解决方案。 ;)

Answer 5

我的 Warning: Failed propType: checker is not a function 版本来自忘记对对象使用 PropTypes.shape。

变化中：

someProps: {
    prop: React.PropTypes.string,
    anotherProp: React.PropTypes.number,
}

为此解决了问题：

someProps: React.PropTypes.shape({
    prop: React.PropTypes.string,
    anotherProp: React.PropTypes.number,
})

Answer 6

我使用 oneOfType 和字符串数组作为参数，而实际上我打算使用 oneOf.

类似的东西：

// Wrong!
PropTypes.oneOfType(['s', 'm'])

// Right!
PropTypes.oneOf(['s', 'm'])

Answer 7

这个问题背后的真正解释是 React 需要一个 PropType，它在技术上是一个函数，又名 checker。检查器函数的示例是：

PropTypes.array
PropTypes.shape({...})
PropTypes.bool

你明白了......所以这里发生的事情是每当你传入一些不是检查器的东西时，例如 undefined，反应将不知道如何处理这个等等会抱怨：

checker is not a function

就我而言，原因是检查器函数的拼写错误：

PropTypes.shape({
    cats: PropTypes.Array // this is undefined
})

正确的版本应该是：

PropTypes.shape({
    cats: PropTypes.array // lowercase is correct!
})

Answer 8

Reactv16

在我的这个 error 版本中，我有一个对象数组：

data: PropTypes.shape([{
  id: PropTypes.number,
  ...
}])

解决方案是制作一个形状数组，如下所示：

data: PropTypes.arrayOf(
  PropTypes.shape({
    id: PropTypes.number,
    ...
  })
)

Answer 9

我在以错误的格式放置 proptypes 时也遇到了这个错误：

static propTypes = {
  workHard: PropTypes.func.isRequired,
  winBig: PropTypes.shape({
    prize: { // issue
      PENDING: PropTypes.bool,
    },
  }),
};

事实证明，在声明 object props

时，prop 类型应该是 PropTypes.shape 或 PropTypes.objectOf 类型

因此，将代码更改为以下错误已修复：

static propTypes = {
  workHard: PropTypes.func.isRequired,
  winBig: PropTypes.shape({
    prize: PropTypes.shape({
      SUCCESS: PropTypes.bool,
    }),
  }),
};

Answer 10

为了好玩再来一个:) 在我的例子中，我将经常使用的模型提取到单独的文件中并导入它们。所以 proptype 定义看起来像这样：

 static propTypes = {
        ...
        selectedAction: shape(ACTION),
        ...
};

我的错误是我在形状中写了一个额外的卷曲：

static propTypes = {
        ...
        selectedAction: shape({ACTION}),
        ...
};

Answer 11

就我而言，我只是不小心删除了一个类型：

grValue: PropTypes, // instead of PropTypes.string

Answer 12

就我而言，我在验证道具时出错了。我忘了将配置文件对象包装到 PropTypes 形状方法中。

Mistake

Component.propTypes = {
  viewProfile: PropTypes.shape({
    profile: {     // it is a normal object without a PropTypes shape method
      firstName: PropTypes.string,
      lastName: PropTypes.string,
      profileImage: PropTypes.string,
    },
  }).isRequired,
};

Solution

Component.propTypes = {
  viewProfile: PropTypes.shape({
    profile: PropTypes.shape({
      firstName: PropTypes.string,
      lastName: PropTypes.string,
      profileImage: PropTypes.string,
    }),
  }).isRequired,
};

React：检查器不是函数

React: checker is not a function

javascript

reactjs