React:checker不是一个函数

Question

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

警告:propType失败:checker不是函数检查render方法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>);
  }
  //...
});

我发送给Chart组件的有效负载是这样的:

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

在我的情况下,当我使用具有复杂对象的shape函数时,我得到了这个.解决方案是从:

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 2

拉取请求已合并到React仓库,只要再次发生此类错误,就会为开发人员提供更好的反馈.

现在,验证消息将如下所示:

提供给oneOf的参数无效,需要一个数组实例.

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

这应该是React 0.14的一部分.

Answer 3

更改

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

至

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

(参数应该是一个数组)

Answer 4

就我而言，我验证 props 的方式是错误的。我忘记将配置文件对象包装到PropTypesshape 方法中。

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,
};

Answer 5

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

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