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() );

ways.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০% সময়।

সম্পাদনা করুন

সাধারণত আপনার একটি স্ট্যাকট্রেস পাওয়া উচিত যা ব্যর্থতা যেখানে ঘটে যায় তার একটি আনুমানিক অবস্থান নির্দেশ করে। এটি আপনার মূল প্রশ্নের মধ্যে থাকা বার্তার পরে সরাসরি অনুসরণ করে।

যদি এটি না দেখায় তবে এটি কেন তদন্ত করা উচিত (এটি সম্ভবত আপনি যে বিল্ড সেটিংটি মিস করছেন)। তথাপি, যদি প্রদর্শন করা হয় না, শুধুমাত্র কর্ম অবশ্যই নিচে সংকীর্ণ হয় যেখানে রপ্তানি / আমদানি ব্যর্থ হচ্ছে।

দুঃখের বিষয়, স্ট্যাকট্র্যাস ছাড়াই এটি করার একমাত্র উপায় হ'ল প্রতিটি ত্রুটি আর ত্রুটি না পাওয়া পর্যন্ত প্রতিটি মডিউল / সাবমডিউল ম্যানুয়ালি মুছে ফেলা হয়, তারপরে স্ট্যাকটি ব্যাক আপ করার জন্য আপনার পথে কাজ করুন।

সম্পাদনা 2

মন্তব্যগুলির মাধ্যমে, এটি আসলে একটি আমদানি সমস্যা ছিল, বিশেষত এমন একটি মডিউল আমদানি করা ছিল যা বিদ্যমান ছিল না

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'

যখন কেবলমাত্র একটি একক ফাইল মাইকমম্পোনেন্ট.জেএসএক্স ছিল ঠিক ছিল। (আমি এই ফর্ম্যাটটিকে একটি উদাহরণে দেখেছি এবং চেষ্টা করেছিলাম, তবে ভুলে গেছি আমি এটি করেছি)

আমি যখন একই ফোল্ডারে মাইকমম্পোনেন্ট.এসএসএস যুক্ত করেছি তখন আমদানি ব্যর্থ হয়েছিল। এর পরিবর্তে জাভাস্ক্রিপ্টটি .scss ফাইলটি লোড করেছে এবং তাই কোনও ত্রুটি ঘটেনি।

আমার উপসংহার: আপনি যদি পরে আর একটি যুক্ত করেন তবে কেবলমাত্র একটি ফাইল থাকলেও সর্বদা ফাইল এক্সটেনশানটি নির্দিষ্ট করুন।

Question 7

ভবিষ্যতের গুগলারের জন্য:

এই সমস্যার সমাধান করার জন্য আমার সমাধানটি ছিল আপগ্রেড করা reactএবং react-domএনপিমের সর্বশেষ সংস্করণগুলিতে। স্পষ্টতই আমি এমন একটি উপাদান আমদানি করছিলাম যা নতুন টুকরা সিনট্যাক্স ব্যবহার করছিল এবং এটি প্রতিক্রিয়াটির আমার পুরানো সংস্করণে ভেঙে গেছে।

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

একটি যুক্তিযুক্ত সমাধান

ম্যাজিক নম্বরগুলি এড়ানো এবং প্রোপটাইপগুলি ব্যবহার করে আরও স্পষ্টত পদ্ধতির ব্যবহার করে আপনার নিজের এবং আপনার কলেজীদের এই হার্ড-টু-ডিবাগ কোড থেকে রক্ষা করা উচিত :

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 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

আমার ক্ষেত্রে, কনটেক্সটএপি ব্যবহার করার চেষ্টা করার সময় ত্রুটি ঘটেছে। আমি ভুল করে ব্যবহার করেছি:

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" }} />)}
    />
);

শুধু পার্থক্য আমি ডিকনস্ট্রাকটিং ছিল 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

প্রতিক্রিয়া। ফ্রেগমেন্ট

বিষয়টি আমার জন্য ঠিক করে দিন

ভুল সংকেত:

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

ফিক্স

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

Question 24

এটি আমদানি / রফতানি সম্পর্কিত সরাসরি সমস্যা নয় necessary আমার ক্ষেত্রে, আমি পিতামাতার উপাদানগুলির মধ্যে একটি শিশু উপাদান রেন্ডার করছিলাম এবং শিশু উপাদানটিতে jsx উপাদান / ট্যাগ রয়েছে যা ব্যবহৃত হয় তবে আমদানি হয় না। আমি এটি আমদানি করেছি এবং আমি এটি ব্যবহার করেছি তখন এটি সমস্যার সমাধান করেছে। সুতরাং সমস্যাটি ছিল জেএসএক্স উপাদানগুলিতে যা চাইল্ড এলিমেন্টের মধ্যে থাকে যা চাইল্ড এলিমেন্টের রফতানি নয়।

Question 25

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

আপনাকে অবশ্যই যুক্ত করতে হবে // eslint-disable-line react/forbid-prop-types, তবে এটি কার্যকর!

Question 26

আমি ঠিক একই ত্রুটি পেয়েছি, পরিবর্তে এটি করুন:

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

Question 27

এর অর্থ আপনার আমদানি / রফতানিটি ভুল ।

নতুন যুক্ত হওয়া পরীক্ষা করুন import/exports।
আমার ক্ষেত্রে আমি অকারণে কোঁকড়ানো বন্ধনী ব্যবহার করছিলাম। আমি যখন এই কোঁকড়া বন্ধনীগুলি সরিয়েছি তখন সমস্যা স্বয়ংক্রিয়ভাবে সমাধান হয়ে যায়।

import { OverlayTrigger } from 'react-bootstrap/OverlayTrigger';

Question 28

আমি এই বেসিক বেসিক সমস্যাটি সমাধান করার চেষ্টা করে 30 মিনিট ব্যয় করেছি।

আমার সমস্যাটি ছিল আমি দেশীয় উপাদানগুলি প্রতিক্রিয়া আমদানি করছিলাম

যেমন import React, { Text, Image, Component } from 'react';

এবং সেগুলি ব্যবহারের চেষ্টা করছে, যার ফলে আমাকে এই ত্রুটিটি পেয়েছে।

একবার ভাবলাম থেকে সুইচ <Text>করতে <p>এবং <Image>করতে <img>সবকিছু যেমন প্রত্যাশিত কাজ করেন।

Question 29

আমি এই ত্রুটিটি পাচ্ছিলাম এবং প্রতিক্রিয়াগুলির কোনওটিই আমার ক্ষেত্রে ছিল না, এটি কাউকে গুগল করতে সহায়তা করতে পারে:

আমি একটি প্রোপাইপকে ভুলের সংজ্ঞা দিচ্ছিলাম:

ids: PropTypes.array(PropTypes.string)

এটা করা উচিত:

ids: PropTypes.arrayOf(PropTypes.string)

ভিএসকোড এবং সংকলন ত্রুটি আমাকে সঠিক ইঙ্গিত দেয় নি।

Question 30

সম্পাদনা

আপনি প্রক্রিয়া জটিল করছেন। শুধু এটি করুন:

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'));

ways.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;