Soru Hata veren tepki verme hatası Türlü TypeError: Süper ifade, null veya bir işlev olmalı, undefined değil


Ben reaksiyonları kullanıyorum.

Aşağıdaki kodu çalıştırdığımda tarayıcı diyor ki:

Yakalanmamış TypeError: Süper ifade, null veya bir işlev olmalı, undefined değil

Neyin yanlış olduğu ile ilgili herhangi bir ipucu takdir edilecektir.

İlk olarak kodu derlemek için kullanılan satır:

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

Ve kod:

var React = require('react');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

GÜNCELLEŞTİRME: Bu soruna üç gün boyunca cehennem ateşinde yantıktan sonra tepkimenin en son sürümünü kullanmadığımı fark ettim.

Global olarak yükle:

sudo npm install -g react@0.13.2

yerel olarak yükleyin:

npm install react@0.13.2

tarayıcının doğru sürümü kullandığından emin olun:

<script type="text/javascript" src="react-0.13.2.js"></script>

Umarım bu üç gün değerli hayatı kurtarır.


173
2018-05-08 05:29


Menşei


0.14.8 itibariyle, böyle bir şey yaparsanız yine de alabilirsiniz extends React.component (küçük harf c). - Kevin Suttle
@Kevin sadece rephrase, sadece bir yerde bir yazım hatası varsa, benim durumumda Components yerine Component  :). Yorumunuz BTW'ye yardımcı oldu - P-RAD
Meselem dosya sonunda sınıf dışına çıkmıyordum ... - R01010010
React.Components (çoğul) yaptım, doğru React.Component (tekil) Ow iyi ... o nasıl özledim ... - Ismael
@Kevin Suttle Yorum, aslında cevaptan daha faydalı - Mick Jones


Cevaplar:


Sınıf İsimleri

İlk olarak, doğru adlandırılmış sınıftan çıktığınızı düşünüyorsanız, ör. React.ComponentReact.component veya React.createComponent değil, React sürümünüzü yükseltmeniz gerekebilir. Uzatılacak sınıflar hakkında daha fazla bilgi için aşağıdaki yanıtlara bakın.

Yükseltme Tepkisi

React, yalnızca 0.13.0 sürümünden bu yana ES6 stili sınıfları destekledi (destek girişinde resmi blog gönderilerine bakın) İşte.

Bundan önce, kullanırken:

class HelloMessage extends React.Component

ES6 anahtar kelimeleri kullanmaya çalışıyordunuz (extends) ES6 kullanılarak tanımlanmayan bir sınıftan alt sınıfa class. Bu büyük olasılıkla neden garip davranışlara dönüştünüz? super tanımlar vb.

Yani evet, TL; DR - React v0.13.x güncellemesi

Dairesel Bağımlılıklar

Bu, dairesel ithalat yapınız varsa da oluşabilir. Bir modül diğerini ve başka bir yolu içe aktarıyor. Bu durumda, kodunuzu önlemek için sadece kodunuzu yeniden düzenlemelisiniz. Daha fazla bilgi


210
2018-05-11 13:23



Bu sorunu içeren ama güncelleme olan herkes için React düzeltme değildir - diğer cevaplara doğru ilerleyin, basit bir yazım hatası olabilir. Benim durumumda, bir sınıf tanımı kullanıldı. React.component yerine React.Component - Christian Benke
FYI, eski yol sınıfı da extends. Bunu dene var x = function(){}; class y extends x {} - Mouneer
Benim için dairesel bir ithalat yapısıydı. Bana saatlerce hata ayıklama yaptığınız için teşekkürler! - DrunkDevKek
Sadece FYI. Son zamanlarda ReactJS 16.x olmasına rağmen aynı hatayı aldım. Bu satırda yazım hatası yaşadığım ortaya çıktı: class App extends React.Component () {...} - düzeltilmesi gereken class App extends React.Component {...}  (olmadan () sonunda) - Atlas7
Sermaye 'C' Bileşeni! #facepalm - David


Bu, alt sınıf bir şey olmasını istediğiniz anlamına gelir. Class, ama undefined. Nedeni şunlar olabilir:

  • yazım hatası Class extends ...Yani tanımlanmamış değişkeni uzatıyorsunuz
  • yazım hatası import ... from, yani sen içe aktar undefined modülden
  • başvurulan modülde değer bulunmuyor, içe aktarma (örneğin, eski modül - React ile örnek), böylece varolan değeri içe aktarıyorsunuz (undefined)
  • başvurulan modülde yazım hatası export ... deyim, bu nedenle tanımlanmamış değişkeni dışa aktarır
  • başvurulan modül eksik export deyim hiç, bu yüzden sadece ihracat undefined

110
2018-02-26 16:14



Benim durumumda React.Component içinde Bileşenin bir küçük harfiydi. - in code veritas
Benim durumumda, doğru bir şekilde ithal edilmeyen, kendi yazılı bir sınıftı. Varsayılan ihraç edilen sınıfı import {Foo} from 'bar' yerine import Foo from 'bar'. Bu sebeple kışkırtıldı. - xtra
Bunu yapma: class Thing extends React.Component() { - çıkarmak zorundaydım () - activedecay
Benim durumumda, bu hatayı, bileşenlerin render işlevinde içe aktardığım şeyle (alt sınıfa genişletmek istediğim sınıf) yanlışlıkla bir referans oluşturması neden oldu. SuperClass henüz oluşturulmadığından bu yana alt sınıfı yürütmeye / işlemeye başladığımda tanımlanmamıştı. - Leon
^ Benim için de bir dairesel referans tarafından neden oldu. - Cailen


Bunun yerine bir yazım hatası nedeniyle de kaynaklanabilir Component C sermayesi ile component alt c ile, örneğin:

React.component //wrong.
React.Component //correct.

Not: Bu hatanın kaynağı olabilir çünkü React ve otomatik olarak ne olacağını otomatik olarak düşünelim, küçük harfle başlayan bir tepki yöntemi veya özellik olmalıdır, ancak aslında başka bir şeydir Sınıf(Component) Büyük harfle başlamalıdır.


80
2017-09-23 01:55



ha, garip bu hata webpack inşa adımı sırasında yakalanmaz, ancak çalışma zamanında görünecektir. - worc


Benim durumumda, tepki yerli ile hata vardı

import React, {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

yerine

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';

22
2018-06-06 04:40



Bu benim durumumda çalıştı! Tepki-yerel sitede sağlanan belgeler bu buggy örneğine sahiptir :) - novembersky


JSX sınıfı için bir ihracat bildirimi eksik olduğunda bunu yaşadım.

Örneğin:

class MyComponent extends React.Component {
}
export default MyComponent // <- add me

14
2017-12-16 21:10





Dairesel bağımlılığınız olduğunda bu hatayı gördüm.

class A extends B {}
class B extends C {}
class C extends A {}

11
2018-02-16 23:24





Bu sorunu geliştirebilecek başka kişiler için. Bunu da kontrol edebilirsin. component yöntem React.Component büyük harfle yazılmıştır. Aynı sorunu yaşadım ve buna neden olan şey şu oldu:

class Main extends React.component {
  //class definition
}

Onu değiştirdim

class Main extends React.Component {
  //class definition
}

ve her şey iyi çalıştı


9
2018-01-09 23:51





Bunu yapmaya teşebbüs ediyorsanız bunu da alabilirsiniz React.Component hatalı () sınıf tanımınızda.

export default class MyComponent extends React.Component() {}
                                                        ^^ REMOVE

Vatansız, işlevsel bir bileşenden bir sınıfa geçerken bazen bunu yapmayı başarabiliyorum.


8
2018-04-13 10:30