Yakalanmayan Hata: Değişmez İhlal: Öğe türü geçersiz: bir dize (yerleşik bileşenler için) veya bir sınıf / işlev bekleniyordu, ancak got: object

Bu hatayı alıyorum:

Yakalanmayan Hata: Değişmez İhlal: Öğe türü geçersiz: bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) bekleniyordu ama got: object.

Bu benim kodum:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

Benim Home.jsxdosyam:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

Benim durumumda ( Webpack kullanarak ) arasındaki fark:

import {MyComponent} from '../components/xyz.js';

vs

import MyComponent from '../components/xyz.js';

İkincisi hataya neden olurken çalışır. Ya da tam tersi.

varsayılanı dışa aktarmanız veya (yol) gerektirmeniz gerekir.

var About = require('./components/Home').default

React bileşenlerinizden herhangi birini modüle ettiniz mi? Evetse, module.exports'u belirtmeyi unuttuysanız bu hatayı alırsınız , örneğin:

modüler olmayan önceden geçerli bileşen / kod:

var YourReactComponent = React.createClass({
    render: function() { ...

ile bileşen / kod modularized module.exports :

module.exports = React.createClass({
    render: function() { ...

Bu hatayı alırsanız bunun nedeni,

import { Link } from 'react-router'

bunun yerine, kullanmak daha iyi olabilir

ithalat {Bağlantı} reaksiyona-yönlendirici-dom '
                      ^ -------------- ^

Bunun tepki yönlendirici sürüm 4 için bir gereklilik olduğuna inanıyorum

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router de özelliklerinden biridir react-router. Yani modüllerinizi değiştirmek için aşağıdaki gibi bir kod gerekir:

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

Kullanmak isterseniz ES6 bağlantı kullanımını (sözdizimi import), kullanım babil yardımcısı olarak.

BTW, kodunuz işleri yapmak için, biz ekleyebilir {this.props.children}içinde Appolduğu gibi,

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

Tek bir soru için cevaplar listesine şaşırmayın. Bu sorunun çeşitli nedenleri vardır;

Benim durumum için uyarı

warning.js: 33 Uyarı: React.createElement: tür geçersiz - bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) bekleniyor, ancak şu şekilde tanımlandı: tanımsız. Bileşeninizi tanımlandığı dosyadan dışa aktarmayı unutmuş olabilirsiniz. Kodunuzu index.js: 13 adresinden kontrol edin.

Ardından hata

invariant.js: 42 Yakalanmadı Hata: Öğe türü geçersiz: bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) bekleniyordu ama var: undefined. Bileşeninizi tanımlandığı dosyadan dışa aktarmayı unutmuş olabilirsiniz.

Herhangi bir yöntem veya dosya adından bahsetmediği için hatayı anlayamadım. Sadece yukarıda belirtilen bu uyarıya baktıktan sonra çözmeyi başardım.

İndex.js'de aşağıdaki satır var.

<ConnectedRouter history={history}>

"ConnectedRouter" anahtar kelimesi ile yukarıdaki hata için googled Ben bir GitHub sayfasında çözüm bulundu.

Bunun nedeni, react-router-reduxpaketi yüklediğimizde , varsayılan olarak bunu yüklememizdir. https://github.com/reactjs/react-router-redux ama gerçek kütüphane değil.

Bu hatayı gidermek için, npm kapsamını @

npm install react-router-redux@next

Yanlış takılmış paketi kaldırmanıza gerek yoktur. Otomatik olarak üzerine yazılacaktır.

Teşekkür ederim.

Not: Uyarı bile size yardımcı olur. Sadece hataya bakarak uyarıyı ihmal etmeyin .

Benim durumumda, dışa aktarılan alt modüllerden biri uygun bir tepki bileşeni döndürmüyordu.

const Component = <div> Content </div>;

onun yerine

const Component = () => <div>Content</div>;

Gösterilen hata ebeveyn içindi, bu yüzden anlayamadım.

Benim durumumda, bu yanlış yorum sembollerinden kaynaklandı. Bu yanlış:

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

Doğru:

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

Kıvırcık parantezlere dikkat edin

Aynı hata var: HATA DÜZELTME !!!!

Kullandığım '-yönlendirici-redux tepki' v4 Ama en kötü .. NPM sonra yükleme tepki-yönlendirici-redux @ sonraki hattayım "tepki-yönlendirici-redux": "^ 5.0.0-alpha.9",

VE ÇALIŞIYOR

Bunu import App from './app/';ithal etmeyi bekleyerek yaptım ./app/index.js, ama bunun yerine ithal etti ./app.json.

Aynı sorunu yaşıyordum ve JSX işaretlemesinde Tanımsız bir Reaksiyon bileşeni sağladığımı fark ettim . Mesele şu ki, oluşturulacak reaksiyon bileşeni dinamik olarak hesaplandı ve tanımsız hale geldi!

Hata şöyle:

Değişmez İhlali: Öğe türü geçersiz: bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) bekleniyordu ama var: undefined. Bileşeninizi tanımlandığı dosyadan dışa aktarmayı unutmuş olabilirsiniz. Oluşturma yöntemini kontrol edin C.,

Bu hatayı üreten örnek:

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

Sorun geçersiz bir "uiType" sağlanmış olması ve bu nedenle sonuç olarak tanımsız üretiyor olmasıydı:

templates['InvalidString']

Tıpkı buna hızlı bir ekleme gibi. Aynı sorunu yaşıyordum ve Webpack testlerimi derlerken uygulama iyi çalışıyordu. Bileşenimi test dosyasına aktarırken, içe aktarma işlemlerinden birinde yanlış durum kullanıyordum ve bu da aynı hataya neden oluyordu.

import myComponent from '../../src/components/myComponent'

Olması gerekirdi

import myComponent from '../../src/components/MyComponent'

İçe aktarma adının myComponent, MyComponentdosyanın içindeki dışa aktarma adına bağlı olduğunu unutmayın .

React Native son sürüm 0.50 ve üstü ile benzer bir sorun vardı.

Benim için şu bir fark vardı:

import App from './app'

ve

import App from './app/index.js'

(ikincisi sorunu çözdü). Bu garip, fark edilmesi zor nüansı yakalamak için bana saatler sürdü :(

Benim için çalışan başka bir olası çözüm:

Şu anda react-router-reduxbeta sürümündedir ve npm 4.x döndürür, ancak 5.x döndürmez. Ancak @types/react-router-reduxgeri dönen 5.x. Yani tanımlanmamış değişkenler kullanıldı.

NPM / İpliği 5.x kullanmaya zorlamak benim için çözdü.

Hatanız verildiğinde:

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

2 seçeneğiniz var:

1. Kişisel ihracat dosyası miyiz defaultgibi export default class ____.... ithalat kullanmaktan kaçınmak gerekir Sonra {}çevresinde. De olduğu gibiimport ____ from ____

2. Varsayılan kelimeyi kullanmaktan kaçının. Sonra dışa aktarma gibi görünüyor export class ____... Sonra içe aktarma {}. Sevmekimport {____} from ____

Benim durumumda, içe aktarma bir kütüphane nedeniyle dolaylı olarak gerçekleşiyordu.

Değiştirerek düzeltmeyi başardım

export class Foo

için

export default class Foo.

Aynı kök adıyla aynı dizinde bir .jsx ve .scss dosyası olduğunda bu hatayla karşılaştım.

Eğer var ise, örneğin, Component.jsxve Component.scssaynı klasörde ve bunu deneyin:

import Component from ./Component

Görünüşe göre Webpack'in kafası karışıyor ve en azından benim durumumda, .jsx dosyasını gerçekten istediğimde scss dosyasını içe aktarmaya çalışıyor.

.Scss dosyasını yeniden adlandırarak ve belirsizlikten kaçınarak sorunu çözebildim. Ayrıca Component.jsx'i açıkça içe aktarmış olabilirdim

Ve benim durumumda, alt modüllerimden birinde ithalat-decleration'da noktalı virgül eksikti.

Bunu değiştirerek düzeltildi:

import Splash from './Splash'

buna:

import Splash from './Splash';

Benim durumumda varsayılan ihracat kullanarak, ancak bir ihraç değildi functionya React.Component, ama sadece aJSX öğeyi aktarıyordum, yani

Hata:

export default (<div>Hello World!</div>)

İşler :

export default () => (<div>Hello World!</div>)

Ek olarak import/ exportbelirtilen konular. Bir alt öğeye React.cloneElement()eklemek propsiçin kullanarak bulundu ve sonra bana aynı hatayı verdi render.

Değişmek zorunda kaldım:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

için:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

Daha fazla bilgi için React.cloneElement() dokümanlara bakın .

Reaksiyon yönlendirmede bu hatayı aldım, sorun şu ki

<Route path="/" component={<Home/>} exact />

ama rota yanlış bir sınıf / fonksiyon olarak bileşen gerektirir, bu yüzden onu değiştirdim

<Route path="/" component={Home} exact />

ve işe yaradı. (Sadece bileşen çevresindeki parantezlerden kaçının)

Benim için tarz bileşenlerim fonksiyonel bileşen tanımlamamdan sonra tanımlandı. Sadece evrelemede oluyordu, benim için değil. Biçimlendirilmiş bileşenlerimi bileşen tanımımın üzerine getirdikten sonra hata ortadan kalktı.

Bu, içe aktarılan Bileşenlerinizin bazılarının yanlış beyan edildiği veya mevcut olmadığı anlamına gelir

Benzer bir sorunum vardı, yaptım

import { Image } from './Shared'

ancak Paylaşılan dosyaya baktığımda bir 'ImageImage' bileşenim değil 'ItemImage' Bileşenim yoktu

import { ItemImage } from './Shared';

Diğer projelerden kod kopyaladığınızda bu olur;)

Bununla ilgili bir sorunum vardı React.Fragment, çünkü reaksiyonumun sürümü buydu < 16.2, bu yüzden ondan kurtuldum.

@Balasubramani M beni buraya kurtardı. İnsanlara yardım etmek için bir tane daha eklemek istedim. Bu, çok fazla şeyi birbirine yapıştırırken ve sürümlerle daha şövalyeli olduğunuzda sorun. Material-ui'nin bir sürümünü güncelledim ve değiştirmeniz gerekiyor

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

buna:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

Ben aynı sorunu vardı ve sorun bazı js dosyaları belirli bir sayfanın paketleme dahil değildi. Bu dosyayı eklemeyi deneyin ve sorun çözülebilir. Bunu ben yaptım:

.Include("~/js/" + jsFolder + "/yourjsfile")

ve bu benim için sorunu çözdü.

Ben Dot NEt MVC React kullanırken oldu

Bu hatanın başka bir nedenini keşfettim. Bir React bileşenindeki return işlevinin üst düzey JSX'ine null bir değer döndüren CSS-in-JS ile ilgilidir.

Örneğin:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Bu uyarıyı alırım:

Uyarı: React.createElement: tür geçersiz - beklenen bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) ama var: null.

Bu hatayı takiben:

Yakalanmayan Hata: Öğe türü geçersiz: bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) bekleniyordu ama var: null.

Oluşturmaya çalıştığım CSS-in-JS bileşeniyle hiçbir CSS olmadığı için keşfettim. Ben boş bir değer değil döndürülen CSS olduğundan emin olarak sabit.

Örneğin:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Neredeyse aynı hatayı alıyorum:

Yakalanmadı (vaatte) Hata: Öğe türü geçersiz: bir dize (yerleşik bileşenler için) veya bir sınıf / işlev (bileşik bileşenler için) bekleniyor, ancak got: nesnesi bekleniyor.

Ekibimin geliştirdiği başka bir düğüm kütüphanesinden saf bir fonksiyonel bileşen almaya çalışıyordum. Düzeltmek için, mutlak bir içe aktarma yapmak zorunda kaldım (içindeki bileşene giden yolu referans alarak node_modules)

FooBarList'i 'team-ui'den içe aktar;

için

FooBarList'i 'team-ui / lib / components / foo-bar-list / FooBarList' öğesinden içe aktarın;

Benim durumumda dış bileşen böyle ithal sona erdi:

import React, { Component } from 'react';

ve sonra şöyle beyan etti:

export default class MyOuterComponent extends Component {

burada bir iç bileşen Tepki'yi çıplak ithal etti:

import React from 'react';

ve bildirim için ona noktalı:

export default class MyInnerComponent extends ReactComponent {

Benim durumumda, arama yapmam biraz zaman aldı ve kontrol edilebilir, ancak yalnızca bu şekilde düzeltildi: Özel bir bileşeni içe aktarırken "{", "}" öğesini kaldırın:

import OrderDetail from './orderDetail';

Yanlış yolum:

import { OrderDetail } from './orderDetail';

OrderDetail.js dosyasında, OrderDetail'ı varsayılan sınıf olarak verdim:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;