Ich möchte eine Zeichenfolge von Main an Header übergeben. Es gelingt aber Warnung. Ich bin ein Anfänger von React, daher kann ich nicht herausfinden, was it must be a functionbedeutet.

Weiß jemand, wie man diese Warnung löst?

Die Warnung lautet:

Und mein Code ist unten:

Main.js

import React from 'react';

import Header from './Header';
import AppList from './AppList/AppList';
import Footer from './Footer';

const propTypes = {
  mainInfo: React.PropTypes.shape({
    title: React.PropTypes.string.isRequired,
    apps: React.PropTypes.array.isRequired,
  }),
};

class Main extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div>
        <Header title={this.props.mainInfo.title} />
        <AppList apps={this.props.mainInfo.apps} />
        <Footer />
      </div>
    );
  }
}

Main.propTypes = propTypes;

export default Main;

Header.js

import React from 'react';

const propTypes = {
  title: React.PropTypes.string.isRequred,
};

class Header extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return (
      <div className="header">
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

Header.propTypes = propTypes;

export default Header;

Sie haben einen Fehler : React.PropTypes.string.isRequred. Rechtschreibung isRequiredrichtig, und es sollte in Ordnung sein.

Dies passiert, wenn Ihr PropType tatsächlich ist undefined.

In meinem Fall hatte ich einen propType von angegeben PropTypes.integer, der nicht zur Liste der Proptypen gehört. Das wird buchstäblich zu undefined. Stattdessen hätte ich verwenden sollen PropTypes.number.

Achten Sie auf ähnliche Fehler mit PropTypes.boolvs PropTypes.boolean, sowie PropTypes.funcvs PropTypes.function.

Es ist auch boolfür Boolesche. Ich überflog die Dokumente und hatte genau das gleiche Problem, bis ich zurückging und sie sorgfältig las.

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

z.B

React.PropTypes.sting
React.PropTypes.text

React könnte dem Benutzer auch mitteilen: "Der von Ihnen definierte PropType-Stich ist undefiniert. Haben Sie ihn falsch geschrieben? Verfügbare PropTypes sind: Zeichenfolge, Nummer, Bool usw."

Der einfache Weg, um das Problem in 3 Schritten zu lösen:

• Schritt 1: Installieren Sie das NPM-Prop-Typ-Paket ( npm prop-types install).
• Schritt 2: Importieren Sie das Paket in Ihre Datei.

Code: import PropTypes from 'prop-types';

• Schritt 3: Entfernen Sie das ReactSchlüsselwort aus der Anweisung (z. B.: React.PropTypes.string.isRequired to PropTypes.string.isRequiredhängt von Ihrer Anweisung ab. Entfernen ReactSie also einfach das Schlüsselwort, da Sie jetzt aus Requisitentypen importieren und nicht aus der React-Bibliothek.

Kopieren und Einfügen, es sei denn, Sie können sicherstellen, dass Sie keinen Tippfehler eingeben!

Ich hatte auch dieses Problem und es verschwendet meine viel Zeit, um es zu beheben!

Machen Sie sich einfach eine Notiz!

VS Code & Plugins

falls ein Tippfehler!

`` `jsx

TestModal.propTypes = {
    title: PropTypes.string,
    //badHideModal: PropTypes.func.required,
    hideModal: PropTypes.func.isRequired,
};

`` `

Mir ist etwas Ähnliches passiert, isRequredanstatt isRequiredmir passiert zu sein. Ich habe versucht , die Standard-Requisiten zu definieren, aber die PropTypes kopiert und den Namen nie geändert, sodass ich am Ende Folgendes gefunden habe:

import PropTypes from 'prop-types'

const Main = ({ title }) => // whatever

Main.propTypes = {
  title: PropTypes.string
}

Main.propTypes = { // this should have been Main.defaultProps! 🤦‍♂️
  title: 'This is the default title!'
}

Also beschwerte sich PropTypes darüber, dass der titleRequisitentyp nicht das Richtige sei. Es sagte etwas wie "es muss eine Funktion sein, normalerweise von React.PropTypes, aber es war eine Zeichenfolge".

Ich dachte, ich würde verrückt. Ich habe den ersten angeschautMain.propTypes und versucht, Tippfehler oder irgendetwas zu finden, das falsch sein könnte, aber wie Sie sehen, war es völlig in Ordnung. Ich habe mehrere Dateien geöffnet, in denen Requisitentypen definiert waren, aber den Fehler nicht ausgelöst haben.

Ich habe offensichtlich am falschen Ort gesucht, aber schließlich aus Glück herausgefunden. Ich hatte ziemlich viel Glück, es tatsächlich zu finden. Diese Facepalming-Bugs sind ziemlich schwer herauszufinden, da sie wie ein Zauberer sind, der eine Hand bewegt, um alle Augen anzuziehen, während er den Trick mit der anderen vorbereitet, normalerweise in Sichtweite.

In meinem Fall geschah es, als ich deklarierte Component.propTypesund darunter, anstatt zu schreiben, Component.defaultPropsschrieb ich erneut und Component.propTypeswies die Standardwerte zu.