Ich versuche, meinem Projekt eine React Map-Komponente hinzuzufügen, aber es tritt ein Fehler auf. Ich verwende den Blog-Beitrag von Fullstack React als Referenz. Ich habe in google_map.js Zeile 83 herausgefunden, wo der Fehler ausgelöst wird:
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
Hier ist meine bisherige Kartenkomponente. Die Seite wird einwandfrei geladen (ohne Karte), wenn ich die Zeilen 58-60, die letzten drei Zeilen, auskommentiere. Bearbeiten: Ich habe die von @Dmitriy Nevzorov vorgeschlagenen Änderungen vorgenommen und es gibt mir immer noch den gleichen Fehler.
import React from 'react'
import GoogleApiComponent from 'google-map-react'
export class LocationsContainer extends React.Component {
constructor() {
super()
}
render() {
const style = {
width: '100vw',
height: '100vh'
}
return (
<div style={style}>
<Map google={this.props.google} />
</div>
)
}
}
export class Map extends React.Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.google !== this.props.google){
this.loadMap();
}
}
componentDidMount(){
this.loadMap();
}
loadMap(){
if (this.props && this.props.google){
const {google} = this.props;
const maps = google.maps;
const mapRef = this.refs.map;
const node = ReactDOM.findDOMNode(mapRef);
let zoom = 14;
let lat = 37.774929
let lng = 122.419416
const center = new maps.LatLng(lat, lng);
const mapConfig = Object.assign({}, {
center: center,
zoom: zoom
})
this.map = new maps.Map(node, mapConfig)
}
}
render() {
return (
<div ref='map'>
Loading map...
</div>
)
}
}
export default GoogleApiComponent({
apiKey: MY_API_KEY
})(LocationsContainer)
Und hier wird diese Kartenkomponente in main.js geroutet:
import {render} from 'react-dom';
import React from 'react';
import Artists from './components/Artists'
import { Router, Route, Link, browserHistory } from 'react-router'
import Home from './components/HomePage'
import Gallery from './components/ArtGallery'
import ArtistPage from './components/ArtistPage'
import FavsPage from './components/FavsPage'
import LocationsContainer from './components/Locations'
//Create the route configuration
render((
<Router history={browserHistory}>
<Route path="/" component={Home} />
<Route path="locations" component={LocationsContainer} />
<Route path="artists" component={Artists} />
<Route path="gallery" component={Gallery} />
<Route path="favorites" component={FavsPage} />
<Route path=":artistName" component={ArtistPage} />
</Router>
), document.getElementById('app'))
javascript
google-maps
reactjs
ecmascript-6
react-router
Mike Fleming
quelle
quelle
export default
s, und wäre esnew GoogleAPIComponent()
nichtGoogleAPIComponent()
?(LocationContainer)
?export default new GoogleApiComponent({ bootstrapURLKeys: MY_API_KEY })
Antworten:
Für mich passierte es, als ich
extends React.Component
am Ende vergaß zu schreiben . Ich weiß, dass es nicht genau das ist, was SIE hatten, aber andere, die diese Antwort lesen, können hoffentlich davon profitieren.quelle
Für mich war es, weil ich vergessen habe, das
new
Schlüsselwort beim Einrichten des animierten Status zu verwenden.z.B:
fadeAnim: Animated.Value(0),
zu
fadeAnim: new Animated.Value(0),
würde es reparieren.
quelle
tl; dr
Wenn Sie React Router v4 verwenden, überprüfen Sie Ihre
<Route/>
Komponente, ob Sie tatsächlich diecomponent
Requisite verwenden, um Ihre klassenbasierte React-Komponente zu bestehen!Allgemeiner: Wenn Ihre Klasse in Ordnung zu sein scheint, überprüfen Sie, ob der Code, der sie aufruft, nicht versucht, sie als Funktion zu verwenden.
Erläuterung
Ich habe diesen Fehler erhalten, weil ich React Router v4 verwendet habe und versehentlich die
render
Requisite anstelle der Requisitecomponent
in der<Route/>
Komponente verwendet habe, um meine Komponente zu übergeben, die eine Klasse war. Dies war ein Problem, darender
eine Funktion erwartet (aufgerufen) wird, während siecomponent
für React-Komponenten funktioniert.Also in diesem Code:
Die Zeile mit der
<Route/>
Komponente sollte folgendermaßen geschrieben sein:Es ist eine Schande, dass sie es nicht überprüfen und einen brauchbaren Fehler für einen solchen und leicht zu fassenden Fehler geben.
quelle
Ist mir passiert, weil ich es benutzt habe
PropTypes.arrayOf(SomeClass)
anstatt
PropTypes.arrayOf(PropTypes.instanceOf(SomeClass))
quelle
PropTypes.oneOfType([SomeClass, SomeOtherClass]).isRequired,
stattPropTypes.oneOfType([PropTypes.instanceOf(SomeClass), PropTypes.instanceOf(SomeOtherClass)]).isRequired,
Sie haben die
export default
Erklärung dupliziert . Der erste wird vom zweiten überschrieben, was eigentlich eine Funktion ist.quelle
Für mich war es
ComponentName.prototype
stattComponentName.propTypes
. automatisch vonPhpstorm
IDE vorgeschlagen. Hoffe es wird jemandem helfen.quelle
Ich hatte das gleiche Problem, es trat auf, weil meine
ES6
Komponentenklasse nicht erweitert wurdeReact.Component
.quelle
Meistens treten diese Probleme auf, wenn Sie die Erweiterung der Komponente von "Reagieren" verpassen :
quelle
Für mich war es, weil ich Prototypen anstelle von PropTypes verwendet habe
es sollte sein
quelle
zu
Jemand sollte kommentieren, wie ein solcher Fehler sehr genau überwacht werden kann.
quelle
Es sieht so aus, als gäbe es keinen Einzelfall, wenn dieser Fehler auftritt.
Ist mir passiert, als ich den Konstruktor nicht in der Statefull-Komponente deklariert habe.
anstatt
quelle
Zwei Dinge, die Sie überprüfen können, sind:
quelle
Dies ist ein allgemeines Problem und tritt nicht in einem Einzelfall auf. Das häufigste Problem in allen Fällen ist jedoch, dass Sie
import
eine bestimmte Komponente vergessen (unabhängig davon, ob sie aus einer von Ihnen installierten Bibliothek oder einer von Ihnen erstellten benutzerdefinierten Komponente stammt):import {SomeClass} from 'some-library'
Wenn Sie es später verwenden, ohne es zu importieren, hält der Compiler es für eine Funktion. Daher bricht es. Dies ist ein häufiges Beispiel:
imports
...code...
und dann irgendwo in Ihrem Code
<Image {..some props} />
Wenn Sie vergessen haben, die Komponente zu importieren,
<Image />
beschwert sich der Compiler nicht wie bei anderen Importen, sondern bricht ab, wenn er Ihren Code erreicht.quelle
Für mich war es, weil ich meine
render
Methode versehentlich gelöscht hatte !Ich hatte eine Klasse mit einer
componentWillReceiveProps
Methode, die ich nicht mehr brauchte, unmittelbar vor einer kurzenrender
Methode. In meiner Eile habe ich versehentlich auch die gesamterender
Methode entfernt .Dies war ein Schmerz , den man aufspüren musste, da ich Konsolenfehler bekam, die auf Kommentare in völlig irrelevanten Dateien als "Quelle" des Problems hinwiesen.
quelle
Ich hatte ein ähnliches Problem, als ich die Rendermethode falsch aufrief
Hat einen Fehler gemacht:
anstatt
richtig:
quelle
Ich hatte es, als ich es tat:
korrekt:
oder
quelle
Bei mir ist es passiert, weil ich meine Verbindungsfunktion nicht richtig verpackt und versucht habe, zwei Standardkomponenten zu exportieren
quelle
Ich habe diesen Fehler festgestellt, als ich die falsche Klasse importiert und auf den falschen Speicher verwiesen habe, während ich mobx in react-native verwendet habe.
In diesem Ausschnitt ist ein Fehler aufgetreten:
Nach wenigen Korrekturen wie im folgenden Ausschnitt. Ich habe mein Problem so gelöst.
Was eigentlich falsch war, ich benutzte die falsche Klasse anstatt
observer
ich benutzteObserver
und anstattcounterStore
ich benutztecounter
. Ich habe mein Problem so gelöst.quelle
Im Ordner
MyComponent.js
Ich habe einige Funktionen in Bezug auf diese Komponente eingefügt:
und dann in eine andere Datei importiert diese Funktion:
Können Sie das Problem erkennen?
Ich habe die geschweiften Klammern vergessen und
MyComponent
unter Namen importiertmyFunction
!Das Update war also:
quelle
Ich habe dies erlebt, als ich beim Importieren einer Funktion und nicht einer Klasse eine falsche Importanweisung geschrieben habe. Wenn
removeMaterial
ist eine Funktion in einem anderen Modul:Richtig:
Falsch:
quelle
Ich habe diesen Fehler durch einen kleinen Fehler erhalten. Mein Fehler war das Exportieren der Klasse als Funktion anstatt als Klasse. Am Ende meiner Klassendatei hatte ich:
wann es hätte sein sollen:
quelle
Ich bin auch darauf gestoßen, es ist möglich, dass Sie einen Javascript-Fehler in Ihrer Reaktionskomponente haben. Stellen Sie sicher, dass Sie bei Verwendung einer Abhängigkeit den
new
Operator für die Klasse verwenden, um die neue Instanz zu instanziieren. Fehler wird wenn werfenthis.classInstance = Class({})
stattdessen verwenden
this.classInstance = new Class({})
Sie sehen in der Fehlerkette im Browser
at ReactCompositeComponentWrapper._constructComponentWithoutOwner
Das ist das Werbegeschenk, glaube ich.
quelle
Versuchen Sie, Ihr HMR zu stoppen, und drücken Sie
npm start
erneut, um Ihr Projekt neu zu erstellen.Dies ließ den Fehler verschwinden, weiß nicht warum.
quelle
In meinem Fall habe ich versehentlich
comment
anstelleComponent
von geschriebenIch habe das gerade geschrieben.
An Stelle von.
Es ist keine große Sache, aber für einen Anfänger wie mich ist es wirklich verwirrend. Ich hoffe das wird hilfreich sein.
quelle
In meinem Fall hat eine übergeordnete Komponente bei Verwendung von JSX andere Komponenten ohne "<>" aufgerufen.
Fix
quelle
Ein weiterer Bericht hier: Es hat nicht funktioniert, als ich exportiert habe:
anstatt
Beachten Sie die Position der Klammern. Beide sind korrekt und werden weder von einem Linter noch von einem hübscheren oder ähnlichem erwischt. Ich habe eine Weile gebraucht, um es aufzuspüren.
quelle
In meinem Fall habe ich versehentlich den Komponentennamen (
Home
) als erstes Argument angegeben, dasconnect
funktioniert, während es am Ende stehen sollte. duh.Dieser gab mir sicher den Fehler:
Aber dieser hat sicher gut funktioniert:
quelle
Dies geschah, als ich meine
render
Funktion versehentlich falsch benannte:Meine Instanz dieses Fehlers wurde einfach verursacht, weil meine Klasse keine richtige
render
Methode hatte.quelle
Eigentlich verbinden sich alle Probleme mit Redux. Lösungen:
Richtig :
Falsch & Bug :
quelle
Für mich war es ein falscher Import eines Reduzierers in die Datei rootReducer.js. Ich habe Container anstelle von Reduzierungsdatei importiert.
Beispiel
Aber sicher sollte es sein
Wobei das Einstellungsverzeichnis die folgenden Dateien enthält: action.js, index.js, reducer.js.
Um dies zu überprüfen, können Sie die Reduzierungen arg der Funktion assertReducerShape () aus der Datei redux / es / redux.js protokollieren.
quelle