javascript - React: checker is not a function - Stack Overflow

admin管理员组

文章数量:1134248

I'm getting this weird warning message in the console for my React app.

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

I do not have any checker method at all. If I remove my propTypes, the warning is gone. Any ideas?

My react component:

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>);
  }
  //...
});

The payload I send to the Chart component is this one:

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"}
];

I'm getting this weird warning message in the console for my React app.

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

I do not have any checker method at all. If I remove my propTypes, the warning is gone. Any ideas?

My react component:

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>);
  }
  //...
});

The payload I send to the Chart component is this one:

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"}
];

• javascript
• reactjs

Share Improve this question Follow edited May 3, 2015 at 23:00 JasonMArcher 15k2222 gold badges5858 silver badges5353 bronze badges asked May 1, 2015 at 21:30 Alan SouzaAlan Souza 7,7951010 gold badges5050 silver badges7272 bronze badges 9

• The impression I got from the error message is that somewhere inside the render method of your Chart component you are trying to call the "checker" method on something that does not have a "checker" method. – hugomg Commented May 1, 2015 at 21:55
• Sorry, but no. I've checked the Chart component and there is no call to checker. I checked React source code and they have some checker functions. But I have no idea how to fix that. – Alan Souza Commented May 1, 2015 at 21:58
• 3 Copying and pasting your propTypes into a different project shows no errors, so I agree with @hugomg; this is probably an error down-stream from the Chart component (e.g. a bad propType in a child). If the bad prop type isn't easily identified, I would probably start deleting propTypes one by one to track it down. – Michelle Tilley Commented May 1, 2015 at 22:01
• 2 Can you provider your render function? – Jeremy D Commented May 1, 2015 at 22:23
• 3 @AlanSouza I mean that React.PropTypes.oneOfType(React.PropTypes.number, React.PropTypes.object) should be React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.object]) – Michelle Tilley Commented May 1, 2015 at 22:31

 |  Show 4 more comments

12 Answers 12

Sorted by: Reset to default 126

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. ;)

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.

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)

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

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.

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

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!
})

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

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,
    ...
  })
)

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

grValue: PropTypes, // instead of PropTypes.string

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'])

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

本文标签： javascriptReact checker is not a functionStack Overflow