反应: 检查器不是一个函数

我在我的 React 应用程序的控制台上收到了这个奇怪的警告信息。

警告: proType 失败: Checker 不是函数检查 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"}
];
33512 次浏览
小开

Change

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

to

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

(the argument should be an array)

小开
最佳答案

A pull request has been merged to the React repo that provides a better feedback for the developer whenever a mistake like this happens again.

Now, the validation message will look like the following:

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

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

This should be part of React 0.14.

小开

FWIW, I was getting Failed PropType: typeChecker is not a function. I noticed that in my PropTypes.arrayOf() properties, I was passing in an object of PropTypes e.g. PropTypes.arrayOf({})instead of passing in PropTypes.shape() e.g. PropTypes.arrayOf(PropTypes.shape({})

Making this change eliminated the error message.

小开

In my case I got this when I used the shape function with a complex object. The solution was to go from:

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

To:

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

Very trivial, I know, yet this might be the solution for someone equally inexperienced as I am. ;)

小开

My version of Warning: Failed propType: checker is not a function came from forgetting to use PropTypes.shape for an object.

Changing:

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

to this fixed the problem:

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

I was using oneOfType with array of strings as an argument when in fact I intended to use oneOf.

Something like that:

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


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

The real explanation behind this issue is that react expects a PropType which is technically a function, aka checker. Examples for checker functions are:

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

You got the idea... So what happens here is whenever you pass in something which isn't a checker, for example an undefined, react won't know what to do with this and so will complain:

checker is not a function

In my case, the cause was misspelling of the checker functions:

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

The correct version should be:

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

Reactv16

In my version of this error I had an array of objects: 

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

The solution was to make an array of shapes like so:

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

I too got this error on putting proptypes in wrong format:

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

Turns out, prop types are expected to be either of type PropTypes.shape or PropTypes.objectOf when it comes to declaring object props

So, error was fixed upon changing code to this:

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

One more for the fun of it :) In my case I extracted regularly used models into separate files and imported them. So the proptype definition looked something like this:

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

My error was that I wrote an additional curly in the shape:

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

In my case I'd simply accidentally removed a type:

grValue: PropTypes, // instead of PropTypes.string
小开

In my case, I was validating props wrong. I forgot to wrap the profile object into PropTypes shape method.

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

提交答案