React.createElement: प्रकार अमान्य है - एक स्ट्रिंग की उम्मीद है

Question 1

अच्छी तरह से खेलने के लिए प्रतिक्रिया-राउटर (v4.0.0) और प्रतिक्रिया-हॉट-लोडर (3.0.0-beta.6) प्राप्त करने की कोशिश कर रहा है, लेकिन ब्राउज़र कंसोल में निम्न त्रुटि प्राप्त करता है:

चेतावनी: React.createElement: प्रकार अमान्य है - एक स्ट्रिंग की उम्मीद (अंतर्निहित घटकों के लिए) या एक वर्ग / फ़ंक्शन (समग्र घटकों के लिए) लेकिन मिला: अपरिभाषित। आप संभवतः अपने घटक को उस फ़ाइल से निर्यात करना भूल गए हैं जिसे उसने परिभाषित किया है।

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes = () => (

    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>

);

export default routes;

Question 2

ज्यादातर समय यह गलत निर्यात / आयात के कारण होता है।

सामान्य त्रुटि:

// File: LeComponent.js
export class LeComponent extends React.Component { ... }

// File: App.js
import LeComponent from './LeComponent';

संभावित विकल्प:

// File: LeComponent.js 
export default class LeComponent extends React.Component { ... }

// File: App.js
import LeComponent from './LeComponent';

कुछ तरीके हैं जो गलत हो सकते हैं, लेकिन यह त्रुटि 60% समय के आयात / निर्यात बेमेल के कारण होती है, हर बार।

संपादित करें

आमतौर पर आपको एक स्टैकट्रेस मिलना चाहिए जो विफलता होने पर अनुमानित स्थान का संकेत देता है। यह आम तौर पर आपके मूल प्रश्न में दिए गए संदेश के बाद सीधे आता है।

यदि यह प्रदर्शित नहीं होता है, तो यह जांच के लायक हो सकता है कि (यह एक निर्माण सेटिंग हो सकती है जो आपको याद आ रही है)। इसके बावजूद, यदि यह प्रदर्शित नहीं होता है, तो निर्यात / आयात विफल हो रहा है , जहां कार्रवाई का एकमात्र कोर्स संकीर्ण है।

अफसोस की बात है, इसे करने का एकमात्र तरीका, स्टैकट्रेस के बिना मैन्युअल रूप से प्रत्येक मॉड्यूल / सबमॉड्यूल को निकालना है जब तक कि आपको अब तक त्रुटि नहीं मिलती है, तब स्टैक को वापस करने के लिए अपना तरीका काम करें।

संपादित करें २

टिप्पणियों के माध्यम से, यह वास्तव में एक आयात मुद्दा था, विशेष रूप से एक मॉड्यूल आयात करना जो मौजूद नहीं था

Question 3

मुझे भी यह त्रुटि मिल रही थी।

मैं उपयोग कर रहा था:

import BrowserRouter from 'react-router-dom';

इसके बजाय फिक्स कर रहा था:

import { BrowserRouter } from 'react-router-dom';

Question 4

इसे इस्तेमाल करे

npm i react-router-dom@next

अपने App.js में

import { BrowserRouter as Router, Route } from 'react-router-dom'

const Home = () => <h1>Home</h1>

const App = () =>(
  <Router>
    <Route path="/" component={Home} />
  </Router>
)

export default App;

Question 5

आपको named exportऔर के बारे में पता होना चाहिए default export। देखें कि मुझे ES6 आयात के लिए कर्ली ब्रेसिज़ का उपयोग कब करना चाहिए?

मेरे मामले में, मैंने इसे बदलकर तय किया

import Provider from 'react-redux'

सेवा

import { Provider } from 'react-redux'

Question 6

मुझे यह समस्या तब हुई जब मैंने एक सीएसएस फ़ाइल को घटक फ़ाइल के समान फ़ोल्डर में जोड़ा।

मेरा आयात विवरण था:

import MyComponent from '../MyComponent'

जो तब ठीक था जब केवल एक फ़ाइल थी, MyComponent.jsx। (मैंने इस प्रारूप को एक उदाहरण में देखा और इसे आजमाया, फिर भूल गया कि मैंने इसे कर लिया है)

जब मैंने MyComponent.scss को एक ही फ़ोल्डर में जोड़ा, तो आयात विफल हो गया। शायद जावास्क्रिप्ट ने इसके बजाय .scss फ़ाइल लोड की, और इसलिए कोई त्रुटि नहीं थी।

मेरा निष्कर्ष: हमेशा फ़ाइल एक्सटेंशन को निर्दिष्ट करें भले ही केवल एक फ़ाइल हो, यदि आप बाद में एक और जोड़ते हैं।

Question 7

भविष्य के गोगलर्स के लिए:

इस समस्या का समाधान मेरे उन्नत करने के लिए था reactऔर react-domNPM पर उनके नवीनतम संस्करणों। जाहिरा तौर पर मैं एक घटक का आयात कर रहा था जो नए टुकड़े के सिंटैक्स का उपयोग कर रहा था और यह मेरे पुराने संस्करण रिएक्ट में टूट गया था।

Question 8

घटकों की सरणी

इस त्रुटि को प्राप्त करने का एक सामान्य तरीका घटकों की एक सरणी का उपयोग करना है, सरणी से रेंडर करने के लिए घटक का चयन करने के लिए एक स्थितीय सूचकांक का उपयोग किया जाता है। मैंने कई बार इस तरह का एक कोड देखा:

const checkoutSteps = [Address, Shipment, Payment]

export const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

यह आवश्यक बुरा कोड नहीं है, लेकिन यदि आप इसे एक गलत सूचकांक (जैसे -1, या 3इस मामले में) के साथ कहते हैं, तो ToRenderघटक त्रुटि को undefinedफेंक देगा React.createElement: type is invalid...:

<Checkout step={0} /> // <Address />
<Checkout step={1} /> // <Shipment />
<Checkout step={2} /> // <Payment />
<Checkout step={3} /> // undefined
<Checkout step={-1} /> // undefined

एक तर्कसंगत समाधान

आपको अधिक स्पष्ट दृष्टिकोण का उपयोग करके, मैजिक नंबरों से बचने और PropTeses का उपयोग करके इस हार्ड-टू-डीबग कोड से अपने और अपने सहयोगियों की सुरक्षा करनी चाहिए :

const checkoutSteps = {
  address: Address,
  shipment Shipment,
  payment: Payment
}

const propTypes = {
  step: PropTypes.oneOf(['address', 'shipment', 'payment']),
}

/* TIP: easier to maintain
const propTypes = {
  step: PropTypes.oneOf(Object.keys(checkoutSteps)),
}
*/

const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Checkout.propTypes = propTypes

export default Checkout

और आपका कोड इस तरह दिखाई देगा:

// OK
<Checkout step="address" /> // <Address />
<Checkout step="shipment" /> // <Shipment />
<Checkout step="payment" /> // <Payment />

// Errors
<Checkout step="wrongstep" /> // explicit error "step must be one of..."
<Checkout step={3} /> // explicit error (same as above)
<Checkout step={myWrongVar} /> // explicit error (same as above)

इस दृष्टिकोण के लाभ

कोड अधिक स्पष्ट है , आप स्पष्ट रूप से देख सकते हैं कि आप क्या प्रस्तुत करना चाहते हैं
आपको संख्याओं और उनके छिपे हुए अर्थ को याद रखने की आवश्यकता नहीं है ( 1पते के लिए, 2 के लिए है ...)
त्रुटियाँ भी स्पष्ट हैं
अपने साथियों के लिए कोई सिरदर्द नहीं :)

Question 9

यह समस्या मुझे तब हुई है जब मेरे रेंडर / रिटर्न स्टेटमेंट में खराब संदर्भ था। (एक गैर मौजूदा वर्ग को इंगित करता है)। बुरे संदर्भों के लिए अपना रिटर्न स्टेटमेंट कोड भी देखें।

Question 10

अधिकांश समय यह एक आयात / निर्यात त्रुटि को इंगित करता है। लेकिन न केवल यह सुनिश्चित करने के लिए सावधान रहें कि स्टैक ट्रेस में संदर्भित फ़ाइल अच्छी तरह से स्वयं निर्यात की जाती है, बल्कि यह भी कि यह फ़ाइल अन्य घटकों को सही ढंग से आयात कर रही है। मेरे मामले में त्रुटि इस प्रकार थी:

import React from 'react';

// Note the .css at the end, this is the cause of the error!
import SeeminglyUnimportantComponent from './SeeminglyUnimportantComponent.css';

const component = (props) => (            
  <div>
    <SeeminglyUnimportantComponent />
    {/* ... component code here */}
  </div>    
);

export default component;

स्निपेट का विस्तार करें

Question 11

मुझे लगता है कि इस बग का निवारण करते समय महसूस करने वाली सबसे महत्वपूर्ण बात यह है कि यह तब प्रकट होता है जब आप उस घटक को तत्काल बनाने का प्रयास करते हैं जो मौजूद नहीं है। इस घटक को आयात करने की आवश्यकता नहीं है। मेरे मामले में मैं गुणों के रूप में घटकों को पारित कर रहा था। मैं कुछ रीफैक्टरिंग के बाद घटक को ठीक से कॉल करने के लिए कॉल में से एक को अपडेट करना भूल गया। दुर्भाग्य से, चूंकि जेएस ने सांख्यिकीय रूप से टाइप नहीं किया है, मेरा बग पकड़ा नहीं गया था, और यह पता लगाने में कुछ समय लगा कि क्या हो रहा है।

इस बग का निवारण करने से पहले आप इसे प्रस्तुत करने से पहले घटक का निरीक्षण करें, यह सुनिश्चित करने के लिए कि यह आपके द्वारा अपेक्षित घटक का प्रकार है।

Question 12

मुझे एक रिएक्ट फ्रैगमेंट याद आ रहा था :


function Bar({ children }) {

  return (
    <div>
     {children}
    </div>
  );
}

function Foo() {
  return (
    <Bar>
      <Baz/>
      <Qux/>
    </Bar>
  );
}

ऊपर दिया गया कोड ऊपर त्रुटि को फेंकता है। लेकिन यह इसे ठीक करता है:

<Bar>
  <>
    <Baz/>
    <Qux/>
  </>
</Bar>

Question 13

मेरे लिए क्या गायब था मैं उपयोग कर रहा था

import { Router, Route, browserHistory, IndexRoute } from 'react-router';

इसके बजाय या सही उत्तर होना चाहिए:

import { BrowserRouter as Router, Route } from 'react-router-dom';

आप npm पैकेज प्रतिक्रिया-रूटर-डोम को जोड़ने की जरूरत है :

npm install react-router-dom@next --save

Question 14

मेरे मामले में मैं अपने (नए) तत्वों को अनुक्रमणिका.जेएस फ़ाइल में रेंडर द्वारा आयात और निर्यात करना भूल गया।

Question 15

मेरे मामले में, जिस क्रम में आप घटक बनाते हैं और रेंडर करते हैं, वह महत्वपूर्ण है। मैं इसे बनाने से पहले घटक प्रदान कर रहा था। सबसे अच्छा तरीका है कि बच्चे के घटक और फिर मूल घटक को बनाया जाए और फिर मूल घटक को प्रस्तुत किया जाए। आदेश बदलते हुए मेरे लिए मुद्दा तय कर दिया।

Question 16

मेरे मामले में मुझे बस से अपग्रेड react-router-reduxकरना था react-router-redux@next। मैं यह मान रहा हूँ कि यह किसी प्रकार की संगतता समस्या रही होगी।

Question 17

सीधे शब्दों में, किसी भी तरह निम्नलिखित हो रहा है:

render() {
    return (
        <MyComponent /> // MyComponent is undefined.
    );
}

यह जरूरी नहीं कि कुछ गलत आयात या निर्यात से संबंधित हो:

render() {
    // MyComponent may be undefined here, for example.
    const MyComponent = this.wizards[this.currentStep];

    return (
        <MyComponent />
    );
}

Question 18

यदि घटक का परीक्षण करते समय आपको यह त्रुटि होती है, तो सुनिश्चित करें कि अकेले चलने पर हर बच्चा घटक सही ढंग से प्रस्तुत करता है, यदि आपका कोई बच्चा घटक प्रस्तुत करने के लिए बाहरी संसाधनों पर निर्भर करता है, तो इसे मज़ाक या किसी अन्य मज़ाक के साथ मज़ाक करने की कोशिश करें:

उदाहरण के लिए:

jest.mock('pathToChildComponent', () => 'mock-child-component')

Question 19

मेरे मामले में, ContextApi का उपयोग करने का प्रयास करते समय त्रुटि हुई। मैंने गलती से इस्तेमाल किया है:

const MyContext = () => createContext()

लेकिन इसे इस प्रकार परिभाषित किया जाना चाहिए:

const MyContext = createContext()

मैं इसे यहां पोस्ट कर रहा हूं ताकि भविष्य में आने वाले आगंतुक जो इस तरह की मूर्खतापूर्ण गलती पर फंस जाते हैं, उन्हें सिरदर्द के घंटों से बचने में मदद मिलेगी, यह गलत आयात / निर्यात के कारण नहीं होता है।

Question 20

सर्कुलर डिपेंडेंसी भी इसका एक कारण है। [सामान्य रूप में]

Question 21

यह एक त्रुटि है जो कुछ है कि कैसे डिबग करना था। जैसा कि यह कई बार कहा गया है, अनुचित आयात / निर्यात इस त्रुटि का कारण बन सकता है, लेकिन आश्चर्यजनक रूप से मुझे यह त्रुटि एक छोटे से बग से मिलीreact-router-dom authentication setup नीचे के :

गलत सेटअप:

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

सही सेटअप:

const PrivateRoute = ({ component: Component, token, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

फर्क सिर्फ इतना है कि मैं deconstructing किया गया था tokenमें PrivateRoute component। जिस तरह से टोकन localstorageइस तरह से प्राप्त होता है , const token = localStorage.getItem("authUser");इसलिए यदि यह वहां नहीं है तो मुझे पता है कि उपयोगकर्ता प्रमाणित नहीं है। यह उस त्रुटि का कारण भी बन सकता है।

Question 22

यह वास्तव में काफी सरल है। मुझे यह मुद्दा मिला जब मैंने रिएक्ट को कोड करना शुरू किया, और समस्या लगभग हमेशा है क्योंकि आयात:

import React, { memo } from 'react';

आप इसे नष्ट करने का उपयोग कर सकते हैं क्योंकि प्रतिक्रिया के रूप में एफबीआई के पास मेमो के रूप में एक संपत्ति है, लेकिन आप इस तरह से कुछ नष्ट नहीं कर सकते हैं

import { user } from 'assets/images/icons/Profile.svg';

क्योंकि यह कोई वस्तु नहीं है।

आशा करता हूँ की ये काम करेगा!

Question 23

React.Fragment

मेरे लिए मुद्दा तय किया

एरर कोड:

 return (
            <section className={classes.itemForm}>
             <Card>
             </Card> 
            </section>
      );

ठीक कर

 return (
      <React.Fragment>
        <section className={classes.itemForm}>
         <Card>
         </Card> 
        </section>
      </React.Fragment>
  );

Question 24

यह आयात / निर्यात से संबंधित प्रत्यक्ष मुद्दा आवश्यक नहीं है। मेरे मामले में, मैं एक मूल तत्व के अंदर एक बाल तत्व प्रदान कर रहा था और बच्चे के तत्व में jsx तत्व / टैग है जिसका उपयोग किया गया है लेकिन आयात नहीं किया गया है। मैंने इसे आयात किया और मैंने इसका इस्तेमाल किया तो इसने इस मुद्दे को ठीक कर दिया। तो समस्या jsx तत्वों में थी, जो कि बाल तत्व के अंदर हैं न कि बाल तत्व का निर्यात।

Question 25

xxxxx.prototype = {dxxxx: PropTypes.object.isRequired, // eslint-disable-line reaction / forbid-prop-types};

आपको जोड़ना होगा // eslint-disable-line react/forbid-prop-types, फिर यह काम किया जाएगा!

Question 26

मैंने इस बुनियादी बुनियादी मुद्दे को हल करने के लिए सिर्फ 30 मिनट का समय बिताया।

मेरी समस्या यह थी कि मैं देशी तत्वों को प्रतिक्रिया दे रहा था

जैसे import React, { Text, Image, Component } from 'react';

और उनका उपयोग करने की कोशिश कर रहा था, जिसके कारण मुझे यह त्रुटि मिली।

एक बार जब मैं से और सब कुछ करने के <Text>लिए स्विच के रूप में उम्मीद के मुताबिक काम किया।<p><Image><img>

Question 27

मुझे यह त्रुटि मिल रही थी और प्रतिक्रियाओं में से कोई भी मेरा मामला नहीं था, इससे किसी को गुमराह करने में मदद मिल सकती है:

मैं एक गलत प्रचार को परिभाषित कर रहा था:

ids: PropTypes.array(PropTypes.string)

यह होना चाहिए:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode और संकलित त्रुटि ने मुझे एक सही संकेत नहीं दिया।

Question 28

संपादित करें

आप प्रक्रिया को जटिल बना रहे हैं। बस यह करें:

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

ReactDom.render(<routes />, document.getElementById('root'));

routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes =
    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>;

export default routes;