Reaktion: Checker ist keine Funktion

Ich erhalte diese seltsame Warnmeldung in der Konsole für meine React-App.

Warnung: Fehlgeschlagen propType: Checker ist keine Funktion Überprüfen Sie die Rendermethode von Chart.

Ich habe überhaupt keine Checker-Methode. Wenn ich meine entferne propTypes, die Warnung ist weg. Irgendwelche Ideen?

Meine Reaktionskomponente:

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

Die Payload, die ich an die Chart-Komponente sende, ist diese:

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

In meinem Fall habe ich das bekommen, als ich die Shape-Funktion mit einem komplexen Objekt verwendet habe. Die Lösung war zu gehen von:

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

Zu:

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

Sehr trivial, ich weiß, aber das könnte die Lösung für jemanden sein, der genauso unerfahren ist wie ich. 😉

Ein Pull-Request wurde mit dem React-Repo zusammengeführt, der dem Entwickler ein besseres Feedback gibt, wenn ein solcher Fehler erneut auftritt.

Nun sieht die Validierungsmeldung wie folgt aus:

Ungültiges Argument für oneOf angegeben, eine Instanz des Arrays erwartet.

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

Dies sollte Teil von React 0.14 sein.

Veränderung

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

zu

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

(das Argument sollte ein Array sein)

In meinem Fall habe ich Requisiten falsch validiert. Ich habe vergessen, das Profilobjekt einzubinden PropTypes Shape-Methode.

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, ich bekam Failed PropType: typeChecker is not a function. Das habe ich bei mir gemerkt PropTypes.arrayOf() Eigenschaften, ich habe ein Objekt von PropTypes übergeben, z PropTypes.arrayOf({})anstatt vorbeizukommen PropTypes.shape() z.B PropTypes.arrayOf(PropTypes.shape({})

Durch diese Änderung wurde die Fehlermeldung beseitigt.

Meine Version von Warning: Failed propType: checker is not a function kam vom Vergessen, PropTypes.shape für ein Objekt zu verwenden.

Ändern:

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

dazu das Problem behoben:

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

Die eigentliche Erklärung für dieses Problem ist, dass React einen PropType erwartet, der technisch gesehen eine Funktion ist, auch bekannt als Prüfer. Beispiele für Checker-Funktionen sind:

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

Sie haben die Idee … Was hier also passiert, ist, wenn Sie etwas passieren, das kein Dame ist, zum Beispiel ein undefinedreagieren wird nicht wissen, was sie damit anfangen sollen und sich beschweren:

Checker ist keine Funktion

In meinem Fall war die Ursache ein Rechtschreibfehler bei den Checker-Funktionen:

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

Die richtige Version sollte sein:

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