আক্রমণকারী লঙ্ঘন: প্রতিক্রিয়া সন্তানের হিসাবে অবজেক্টগুলি বৈধ নয়

Question

আমার উপাদানগুলির রেন্ডার ফাংশনে আমার রয়েছে:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

<li>আমি নীচের ত্রুটিটি পেয়েছি উপাদানটিতে ক্লিক করার পরে সবকিছু ঠিকঠাক করে দেয় :

আনকড ত্রুটি: আক্রমণকারী লঙ্ঘন: রিঅ্যাক্ট শিশু হিসাবে অবজেক্টগুলি বৈধ নয় (পাওয়া গেছে: কীগুলির সাথে অবজেক্টস {ডিসপ্যাচ কনফিগ, ডিসপ্যাচমার্কার, নেটিভেন্ট, টার্গেট, কারেন্ট ট্রেজার্ট, টাইপ, ইভেন্টপেজ, বুদবুদ, বাতিল, টাইমস্ট্যাম্প, ডিফল্টপ্রাইভেন্ট, ইসট্রাস্ট, ভিউ, ডিটেল, স্ক্রিনএক্স) , স্ক্রিনওয়াই, ক্লায়েন্টএক্স, ক্লায়েন্টওয়াই, সিটিআরএলকি, শিফটকি, ওয়েলকি, মেটাকি, গেটমডিফায়ারস্টেট, বোতাম, বোতাম, সম্পর্কিত ট্রেজেট, পেজএক্স, পেজওয়াই, ডিফল্টপ্রাইভেন্টড, ইসপ্রেজেশনসটপড, _ডিসপ্যাচলিস্টনারস, _ডিস্পচিডিস})।)। যদি আপনি বাচ্চাদের কোনও সংগ্রহ রেন্ডার করতে চান, তবে পরিবর্তে একটি অ্যারে ব্যবহার করুন বা প্রতিক্রিয়াযুক্ত অ্যাড-অনগুলি থেকে ক্রেকফ্র্যাগমেন্ট (অবজেক্ট) ব্যবহার করে অবজেক্টটি মোড়ানো করুন। এর রেন্ডার পদ্ধতিটি পরীক্ষা করুন Welcome।

যদি আমি পরিবর্তন this.onItemClick.bind(this, item)করতে (e) => onItemClick(e, item)আশানুরূপ মানচিত্র ফাংশন সবকিছু যে কাজ করছে ভিতরে।

কেউ যদি আমি কী ভুল করছি তা ব্যাখ্যা করতে এবং আমি কেন এই ত্রুটিটি পাই তা ব্যাখ্যা করতে পারলে দুর্দান্ত হবে

আপডেট 1:
অন ​​আইটেমিক্লিক ক্রিয়াকলাপটি নীচে এবং এই সেটটি সরিয়ে ফেলা ত্রুটি অদৃশ্য হয়ে যায়।

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

তবে এই উপাদানটির স্থিতি আপডেট করার জন্য আমি এই লাইনটি সরাতে পারি না

Comments

তাহলে কীভাবে this.onItemClickবাস্তবায়ন হয়?

— zerkms

@ জারকम्स উত্তর দেওয়ার জন্য ধন্যবাদ, আমি প্রশ্নটি আপডেট করেছি এবং হ্যাঁ মনে হচ্ছে সমস্যাটি এই স্টেট (স্টেট) এ রয়েছে তবে কেন এটি এই ত্রুটিটি ফেলে দেয়? :(

— almeynman

সেটস্টেটে কি সিনট্যাক্স ত্রুটি রয়েছে? একটি অতিরিক্ত কমা? ত্রুটিটি ঠিক করতে পারে না, তবে এটি সন্ধান করেছে।

— ভড়গব পোনাপল্লি

@ ভরগাভপোনপল্লি কমা পছন্দসই বিষয়, আমার এসলিন্ট আমাকে তা করতে বাধ্য করে, কিন্তু এটি সরিয়ে

— ফেললে

আমি এই ত্রুটিটি পেয়েছি যখন আমি একটি ভেরিয়েবলের চারপাশে কোঁকড়ানো ধনুর্বন্ধনী ভুলে গিয়েছিলাম যা স্থানীয় ভেরিয়েবল থেকে এটি একটি চুল্লী স্থানে যুক্ত করার পরে একটি রাষ্ট্র-পূর্ণ বস্তুতে পরিণত হয়েছিল।

— jamescampbell

Answer 1

আমার এই ত্রুটি ছিল এবং এটি প্রমাণিত হয়েছিল যে আমি অনিচ্ছাকৃতভাবে আমার জেএসএক্স কোডটিতে একটি অবজেক্টটি অন্তর্ভুক্ত করছি যা আমি স্ট্রিংয়ের মান হিসাবে প্রত্যাশা করেছিলাম:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElementস্ট্রিং হিসাবে ব্যবহৃত হত তবে রিফ্যাক্টরের কারণে একটি অবজেক্টে পরিণত হয়েছিল। দুর্ভাগ্যক্রমে, প্রতিক্রিয়াটির ত্রুটি বার্তাটি আমাকে যে লাইনে সমস্যাটি রয়েছে সেদিকে ইঙ্গিত করার ক্ষেত্রে ভাল কাজ করেনি। আমাকে "স্টপস" একটি উপাদান হিসাবে দেওয়া হচ্ছে এবং তারপরে আমি আপত্তিকর কোডটি খুঁজে পেলাম না হওয়া পর্যন্ত আমার স্ট্যাক ট্রেসটি পুরোপুরি অনুসরণ করতে হয়েছিল।

আপনি হয় হয় স্ট্রিং মান হিসাবে অবজেক্টের একটি সম্পত্তি রেফারেন্স করতে হবে বা আকাঙ্ক্ষিত স্ট্রিং উপস্থাপনায় অবজেক্টটি রূপান্তর করতে হবে। JSON.stringifyআপনি যদি অবজেক্টের বিষয়বস্তু দেখতে চান তবে একটি বিকল্প হতে পারে ।

Comments

সুতরাং, আপনার যদি কোনও জিনিস থাকে তবে আপনি কীভাবে এটি পছন্দসই কিছুতে রূপান্তর করবেন?

— adinutzyc21

আপনি হয় হয় স্ট্রিং মান হিসাবে অবজেক্টের একটি সম্পত্তি রেফারেন্স করতে হবে বা আকাঙ্ক্ষিত স্ট্রিং উপস্থাপনায় অবজেক্টটি রূপান্তর করতে হবে। আপনি যদি অবজেক্টের বিষয়বস্তু দেখতে চান তবে একটি বিকল্প হতে পারে JSON.stringify।

— কোড কমান্ডার

একই ত্রুটিযুক্ত এবং এই ব্যাখ্যাটি আমার সমস্যা সমাধান করেছে issue এই জন্য 1 ইউপি। :)

— পাপস্কি

আহ, আমার ত্রুটি বার্তার একই সমস্যাটি ভুল লাইনের দিকে ইঙ্গিত করছে - এটি বলেছিল যে ত্রুটিটি এই। সেট স্টেটে ছিল ({আইটেম: আইটেম}) যখন সত্যিই এটি আরও নিচে উড়ে গেল যেখানে আমি সেই পরিবর্তনশীলটি প্রদর্শন করার চেষ্টা করছিলাম { this.state.items}। JSON.stringify এটি স্থির!

— রাবারডাক র্যাবিট

ভবিষ্যতের পাঠকদের জন্য: স্ট্রিতে রূপান্তর করবেন না। পরিবর্তে এটি করুন: কনস্টিপ Lcomp घटक = this.w والvayReturnsObject (); তারপরে () nder রিটার্নে <Lcomp घटक /> nder রেন্ডার করুন its

— নিক

Answer 2

সুতরাং আমি এই ত্রুটিটি পেয়েছি যখন createdAtএকটি তারিখ অবজেক্টটি সম্পত্তি প্রদর্শন করার চেষ্টা করছিলাম । আপনি যদি .toString()শেষের দিকে এই মত প্রকাশ করেন তবে এটি রূপান্তরটি করবে এবং ত্রুটি দূর করবে। অন্য কেউ যদি একই সমস্যার মুখোমুখি হয় তবে কেবল এটিকে সম্ভাব্য উত্তর হিসাবে পোস্ট করা:

{this.props.task.createdAt.toString()}

Comments

বিঙ্গো! আমার এই সমস্যাটি ছিল তবে ট্র্যাক থেকে ফেলে দেওয়া হয়েছিল কারণ এটি প্রদর্শিত টেবিলটি লোড হবে (এবং পুনরায় লোড করুন) ঠিক ঠিক। প্রতিক্রিয়া কেবলমাত্র objects are not validযখন আমি একটি সারি যুক্ত করি তখন আক্রমণকারী লঙ্ঘন নিক্ষেপ করবে । দেখা যাচ্ছে যে আমি তারিখ () অবজেক্টটিকে স্ট্রিংয়ে রূপান্তরিত করার আগে তা ধরে রাখার আগে কেবলমাত্র আমার নতুন সারিগুলিতে তৈরি তারিখের জন্য বস্তু ছিল। :( আমার পথচলা উদাহরণের লোকদের কাছ থেকে শিখুন!

— স্টিভ

Answer 3

আমি ঠিক একই ত্রুটি পেয়েছি তবে ভিন্ন ভুলের কারণে: আমি ডাবল ধনুর্বন্ধনী ব্যবহার করেছি যেমন:

{{count}}

countসঠিক পরিবর্তে এর মান সন্নিবেশ করতে :

{count}

যা সংকলক সম্ভবতঃ রূপান্তরিত করেছিল {{count: count}}, অর্থাত কোনও প্রতিক্রিয়া শিশু হিসাবে কোনও বস্তু .োকানোর চেষ্টা করছে trying

Comments

কি {{}} / জন্য বোঝানো হয়

— Muneem হাবিব

@ মুনিমহাবীব এটি কেবল ES6 সিনট্যাক্স। প্রতিক্রিয়া এক জোড়া প্রয়োজন {}। অভ্যন্তরীণ জুটি ES6 কোড হিসাবে বিবেচনা করা হয়। ES6 এ, {count}হিসাবে একই {count: count}। সুতরাং আপনি যখন টাইপ করুন {{count}}, ঠিক হিসাবে একই { {count: count} }।

— ডগবার্ট

এই ত্রুটিটি ছিল - এটি ছিল সমস্যা। আমার ভেরিয়েবলটি কনস্ট্রাক্টরে স্টেটে দেওয়ার সময় আমার কাছে this.state = {navMenuItems: {navMenu}};... যা মূলত আমার জেএসএক্সকে navMenuজেনেরিক অবজেক্টে পরিণত করেছিল । পরিবর্তন this.state = {navMenuItems: navMenu};করার জন্য অনিচ্ছাকৃত 'ঢালাই' পরিত্রাণ Objectএবং সমস্যা সমাধান করা হয়েছে।

— নিম্ন ক্রোলার

Answer 4

কেবল ভেবেছিলাম যে আমি আজ একই সমস্যা হওয়ায় আমি এটিতে যুক্ত করব, দেখা যাচ্ছে যে কারণ আমি কেবল ফাংশনটি ফিরিয়ে দিচ্ছিলাম, যখন আমি এটি একটি <div>ট্যাগে আবদ্ধ করি যখন এটি কাজ শুরু করে, নীচের মতো

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

উপরেরটির কারণে ত্রুটি ঘটেছে। আমি return()বিভাগটি এতে পরিবর্তন করে সমাধান করেছি:

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

... বা সহজভাবে:

return gallerySection

Comments

অথবা আপনি return gallerySectionঅতিরিক্ত এড়াতে চাইলে কেবল ব্যবহার করতে পারেনdiv

— বিশাল

gallerySectionপরিবর্তে ফিরে <div>{gallerySection}</div>আমাকে সাহায্য করেছে।

— জানন

Answer 5

প্রতিক্রিয়া শিশু (একবচন) আদিম তথ্য প্রকারের ধরণের হওয়া উচিত নয় বা এটি জেএসএক্স ট্যাগ হতে পারে (যা আমাদের ক্ষেত্রে নয়) । বৈধতা নিশ্চিত হওয়ার জন্য বিকাশে প্রোপাইটিপস প্যাকেজটি ব্যবহার করুন।

আপনাকে ধারণার সাথে উপস্থাপনের জন্য কেবল একটি দ্রুত কোড স্নিপেট (জেএসএক্স) তুলনা:

1. ত্রুটি: অবজেক্টটি সন্তানের মধ্যে দিয়ে যাওয়ার সাথে

   <div>
   {/* item is object with user's name and its other details on it */}
    {items.map((item, index) => {
     return <div key={index}>
   --item object invalid as react child--->>>{item}</div>;
    })}
   </div>

2. ত্রুটি ছাড়াই: অবজেক্টের সম্পত্তি ( যা আদিম হওয়া উচিত, অর্থাত্ একটি স্ট্রিং মান বা পূর্ণসংখ্যার মান ) সন্তানের হাতে দেওয়া।

   <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>

TLDR; (নীচের উত্স থেকে): নিশ্চিত করুন যে আপনি জেএসএক্সে যে আইটেমগুলি রেন্ডার করছেন তা সমস্ত প্রতিক্রিয়াশীল এবং প্রতিক্রিয়া ব্যবহার করার সময় অবজেক্ট নয়। এই ত্রুটিটি সাধারণত ঘটে থাকে কারণ কোনও ইভেন্ট প্রেরণের সাথে জড়িত কোনও ফাংশন একটি অপ্রত্যাশিত অবজেক্টের ধরণ দেওয়া হয়েছে (যেমন কোনও স্ট্রিং পাস করার সময় কোনও বস্তুটি পাস করা) বা আপনার উপাদানটির জেএসএক্সের কোনও অংশ আদিমকে উল্লেখ করছে না (অর্থাত্.এই ফসলগুলি) বনাম এই.প্রেস.নাম)।

সূত্র - কোডিংবিসমুথ.কম

Comments

এই লিঙ্কটি আর কাজ করে না, তবে আমি আপনার উত্তরটির কাঠামোটিকে আমার ব্যবহারের ক্ষেত্রে সর্বাধিক তথ্যবহুল বলে মনে করি। এই ত্রুটিটি ওয়েব এবং দেশীয় পরিবেশের প্রতিক্রিয়া উভয় ক্ষেত্রেই উত্পাদনযোগ্য এবং অ্যাসিঙ্ক লাইফাইসাইকেল ব্যবহার করে কোনও উপাদানগুলির মধ্যে একটি ম্যাপ () ম্যাপ করার চেষ্টা করার সময় প্রায়শই একটি লাইফাইসাইকেল ত্রুটি হিসাবে দেখা দেয়। নেটিভ

— রিএ্যাক্ট

খুশী, যে আপনি এটি দরকারী এবং লিঙ্ক ইস্যু পতাকাঙ্কিত জন্য ধন্যবাদ।

— জাভেরীর

এটি আমাকে সাহায্য করেছিল। কোনও বস্তুর পরিবর্তে একটি সম্পত্তি ফিরিয়ে দিন:return <p>{item.whatever}</p>;

— ক্রিস

Answer 6

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

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

একবার আমি উপাদান থেকে কোঁকড়া ধনুর্বন্ধনী অপসারণ, ত্রুটি চলে গেছে, এবং উপাদানটি সঠিকভাবে রেন্ডার করা হয়েছিল।

Comments

ধন্যবাদ! উপাদান থেকে কোঁকড়ানো ধনুর্বন্ধনী বন্ধনী আমার জন্য কাজ করে!

— হুয়া ঝাং

Answer 7

আমার কোনও প্রেজেন্টাল উপাদানগুলিতে প্রপস প্রেরণ করা প্রায় কোঁকড়া ধনুর্বন্ধনী ভুলে যাওয়া ছিল:

আগে:

const TypeAheadInput = (name, options, onChange, value, error) => {

পরে

const TypeAheadInput = ({name, options, onChange, value, error}) => {

Comments

আমার সমস্যাটি আপনার সাথে সাদৃশ্যপূর্ণ, সুতরাং আপনার সমাধান প্রয়োগ করা আমাকে সহায়তা করেছিল। +1 এবং ধন্যবাদ!

— m1gp0z

Answer 8

আমিও এই "বস্তুগুলি প্রতিক্রিয়া সন্তানের হিসাবে বৈধ নয়" ত্রুটিটি পেয়েছিলাম এবং আমার জেএসএক্সে একটি অ্যাসিঙ্ক্রোনাস ফাংশন কল করার কারণটি ছিল। নিচে দেখ.

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

আমি যা শিখেছি তা হল অ্যাসিক্রোনাস রেন্ডারিং রিঅ্যাক্টে সমর্থিত নয়। প্রতিক্রিয়া দলটি এখানে নথিভুক্ত হিসাবে একটি সমাধান নিয়ে কাজ করছে ।

Comments

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

— mrwagaba

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

— mrwagaba

Answer 9

অ্যান্ড্রয়েড সহ ফায়ারবেস যে কারও জন্য, এটি কেবল অ্যান্ড্রয়েডকে ব্রেক করে। আমার আইওএস এমুলেশন এটিকে উপেক্ষা করে।

এবং উপরে অপুরভ বানকি পোস্ট করেছেন।

অ্যান্ড্রয়েডের জন্য ফায়ারবেস ভি 5.0.3 এর উপরে যে কোনও কিছুই, এটিএম একটি বক্ষ ফিক্স:

npm i --save firebase@5.0.3

এখানে অসংখ্যবার নিশ্চিত হয়েছে https://github.com/firebase/firebase-js-sdk/issues/871

Comments

নীচে কেঁধেরাজ প্রস্তাবিত যে কেউ সমাধানের চেষ্টা করছেন, তার জন্য **** 1 ডাউন ভোট যদি আপনি আপনার প্রকল্পের মধ্যে যে কোনও ফাইল ফায়ারবেস ব্যবহার করেন। তারপরে কেবল সেই আমদানি ফায়ারবেস স্টেটমেন্টটি শেষে রাখুন !! আমি জানি এই পাগল লাগছে কিন্তু চেষ্টা করে দেখুন !! **************** আমি এটি চেষ্টা করেছিলাম এবং এটি আইওএসের জন্য নয় কেবল উইন্ডোজের অ্যান্ড্রয়েডের জন্য সমাধান।

— RedEarth

Answer 10

আমারও একই সমস্যা তবে আমার ভুলটি এত বোকা। আমি সরাসরি অবজেক্ট অ্যাক্সেস করার চেষ্টা করছিলাম।

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

Answer 11

যদি কোনও কারণে আপনি ফায়ারবেস আমদানি করেন। তারপরে দৌড়ানোর চেষ্টা করুন npm i --save firebase@5.0.3। এটি কারণ ফায়ারবেস বিরতি দেশীয় প্রতিক্রিয়া দেখায়, তাই এটি চালানো এটি ঠিক করবে।

Answer 12

আমার ক্ষেত্রে এটি ছিল যে আমি রেন্ডার ফাংশন থেকে একটি এইচটিএমএল উপাদান ফিরতে ভুলে গিয়েছিলাম এবং আমি কোনও বস্তু ফিরিয়ে দিচ্ছিলাম। আমি যা করেছি তা হ'ল আমি কেবল h আইটেমগুলি a এইচটিএমএল উপাদান দিয়ে মুড়িয়েছি - নীচের মত একটি সাধারণ ডিভ

<ul>{items}</ul>

Answer 13

আমার একই সমস্যা ছিল কারণ আমি propsকোঁকড়া ধনুর্বন্ধনী মধ্যে রাখেনি ।

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

সুতরাং যদি আপনার কোডটি উপরেরটির মতো হয় তবে আপনি এই ত্রুটিটি পাবেন। সমাধানের জন্য এই মাত্র প্রায় কোঁকড়া ধনুর্বন্ধনী করা props।

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Comments

@ ধর্মমন আমার মনে হয় এই ছোট্ট ইন্ডেন্টেশনের আগেও এটি ভালভাবে বোঝা গিয়েছিল

— সুরেশ মঙ্গস ২

আমি বলিনি এটি ছিল না। আমি মনে করি আপনার উত্তরটি इंडেন্টেশন সহ আরও ভাল দেখাচ্ছে। আপনি যদি মতানৈক্য করেন তবে দয়া করে এটিকে আবার ঘোরান।

— ধর্মমান

@ ধরমান না, সবই দুর্দান্ত।

— সুরেশ মাঙ্গস

Answer 14

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

export default withAlert(Alerts)

এই

export default withAlert()(Alerts)।

পুরানো সংস্করণগুলিতে পূর্বের কোডটি ঠিক ছিল তবে পরবর্তী সংস্করণগুলিতে এটি একটি ত্রুটি ছুঁড়ে। সুতরাং ভুলটি এড়াতে পরবর্তী কোডটি ব্যবহার করুন।

Answer 15

আমার ক্ষেত্রে ত্রুটিটি ঘটছিল কারণ আমি কোঁকড়ানো ধনুর্বন্ধনী মধ্যে উপাদান অ্যারে ফিরে এসেছি অ্যারে নিজেই ফিরে আসার পরিবর্তে ।

ত্রুটি সহ কোড

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

সঠিক কোড

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

Answer 16

আপনি পুরো বস্তুর পরিবর্তে কেবলমাত্র বস্তুর কী ব্যবহার করছেন!

আরও বিশদ এখানে পাওয়া যাবে: https://github.com/gildata/RAIO/issues/48

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 17

আমার একই সমস্যা আছে, আমার ক্ষেত্রে আমি রিডুএক্স আপডেট করি অবস্থা এবং নতুন ডেটা পরামিতিগুলি পুরানো প্যারামিটারগুলির সাথে মেলে না, তাই যখন আমি এই ত্রুটির মাধ্যমে কিছু পরামিতিগুলি অ্যাক্সেস করতে চাই,

হয়তো এই অভিজ্ঞতা কাউকে সাহায্য করে

Comments

আমার ক্ষেত্রে, (জ্যাঙ্গো) লিস্টশিরাইজার এবং ক্রিয়েটরিশালাইজার একই ক্ষেত্রগুলি প্রত্যাবর্তন করবে এবং তাদের মধ্যে কিছু (এটি আপনার প্রকল্পের উপর নির্ভরশীল) কেবল পঠনযোগ্য ক্ষেত্র, সুতরাং একবার এবং যখনই নতুন ডেটা তৈরি করুন কেবলমাত্র রেডডেক্স রাজ্য আপডেট করুন

— মোহাম্মদ মাসউমি

Answer 18

আপনি যদি ফায়ারবেস ব্যবহার করছেন এবং এই ত্রুটিটি দেখে থাকেন তবে আপনি এটি সঠিকভাবে আমদানি করছেন কিনা তা যাচাই করে নেওয়া উচিত। সংস্করণ 5.0.4 হিসাবে আপনাকে এটি এই জাতীয়ভাবে আমদানি করতে হবে:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

হ্যা আমি জানি. আমি এই 45 মিনিটও হারিয়েছি।

Comments

ধন্যবাদ. এটি ফায়ারবেস (5.9.2) দিয়ে আমার সমস্যার সমাধান করেছে :)

— সাথ

Answer 19

সাধারণত এটি পপ হয় কারণ আপনি সঠিকভাবে কাঠামোগত করেন না। উদাহরণস্বরূপ এই কোডটি নিন:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

আমরা পরম দিয়ে এটি ঘোষণা করছি = text =>। তবে সত্যই, প্রতিক্রিয়াটি এটি একটি সর্ব-সংবেদী propsবস্তু হিসাবে প্রত্যাশা করছে ।

সুতরাং আমাদের সত্যই এমন কিছু করা উচিত:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

পার্থক্য লক্ষ্য করুন? এখানকার propsপরমটির নামকরণ করা যেতে পারে ( propsকেবল নামকরণের সাথে মেলে এমন কনভেনশন), প্রতিক্রিয়া কেবল কী এবং ভ্যালস সহ কোনও বস্তুর প্রত্যাশা করে।

সঙ্গে বস্তুর ডেসট্রাকচারিং আপনি কি করতে পারেন, এবং ঘন ঘন দেখতে পাবেন, ভালো কিছু:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

... যা কাজ করে।

সম্ভাবনাগুলি হ'ল, যে কেউ এটিকে হোঁচট খাচ্ছে কেবলমাত্র দুর্ঘটনাক্রমে বিনষ্ট ছাড়াই তাদের উপাদানগুলির প্রপস পরম ঘোষণা করে।

Answer 20

আমি এই ত্রুটিটির সত্যই নির্লজ্জ সংস্করণটি দিয়েছিলাম, যা আমি উত্তরোত্তর জন্য এখানে ভাগ করে নিতে পারি।

আমার কিছু জেএসএক্স এটি ছিল:

...
{
  ...
  <Foo />
  ...
}
...

কিছু ডিবাগ করার জন্য আমার এই মন্তব্য করতে হবে। আমি আমার আইডিইতে কীবোর্ড শর্টকাট ব্যবহার করেছি, যার ফলস্বরূপ:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

যা অবশ্যই অবৈধ - প্রতিক্রিয়া শিশু হিসাবে অবজেক্টগুলি বৈধ নয়!

Answer 21

আমি এই তালিকার আরও একটি সমাধান যুক্ত করতে চাই।

চশমা:

• "প্রতিক্রিয়া": "^ 16.2.0",
• "প্রতিক্রিয়া-ডোম": "^ 16.2.0",
• "প্রতিক্রিয়া-হ্রাস": "^ 5.0.6",
• "প্রতিক্রিয়া-স্ক্রিপ্টগুলি": "^ 1.0.17",
• "রিডেক্স": "^ 3.7.2"

আমি একই ত্রুটির মুখোমুখি হয়েছি:

আনকড ত্রুটি: প্রতিক্রিয়া শিশু হিসাবে অবজেক্টগুলি বৈধ নয় (পাওয়া গেছে: কীগুলির সাথে {XXXXX} অবজেক্ট)। যদি আপনি বাচ্চাদের সংগ্রহ সরবরাহ করতে চান, তবে পরিবর্তে একটি অ্যারে ব্যবহার করুন।

এটি আমার কোড ছিল:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

সমাধান:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

সমস্যা দেখা দিচ্ছিল কারণ পে-লোড আইটেমটি একটি বিষয় হিসাবে প্রেরণ করছিল। আমি যখন পেডলোড ভেরিয়েবলটি সরিয়ে নিয়েছি এবং ব্যবহারকারী ইনপুট মানটি প্রেরণের মধ্যে রেখেছিলাম তখন প্রত্যাশা অনুযায়ী কাজ করা শুরু করে।

Answer 22

যদি আপনি ফায়ারবেস আপনার প্রকল্পের মধ্যে যে কোনও ফাইল ব্যবহার করেন। তারপরে কেবল সেই আমদানি ফায়ারবেস স্টেটমেন্টটি শেষে রাখুন !!

আমি জানি এই পাগল লাগছে কিন্তু চেষ্টা করে দেখুন !!

Answer 23

যখন আমি নিম্নলিখিত ত্রুটির মুখোমুখি হই তখন আমার সমস্যাটি সহজ ছিল:

objects are not valid as a react child (found object with keys {...}

that অবজেক্ট using ব্যবহার করে বস্তুটি সরাসরি কোনও উপাদানটিতে রেন্ডার করার চেষ্টা করার সময় আমি ত্রুটিটিতে নির্দিষ্ট কীগুলির সাথে একটি বস্তুটি পাস করছিলাম যা এটি স্ট্রিং হিসাবে প্রত্যাশা করে

object: {
    key1: "key1",
    key2: "key2"
}

একটি প্রতিক্রিয়া অংশে রেন্ডার করার সময় আমি নীচের মতো কিছু ব্যবহার করেছি

render() {
    return this.props.object;
}

কিন্তু এটা করা উচিত ছিল

render() {
    return this.props.object.key1;
}

Answer 24

যদি স্টেটলেস উপাদান ব্যবহার করে থাকে তবে এই ধরণের ফর্ম্যাটটি অনুসরণ করুন:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

এটা আমার জন্য কাজ বলে মনে হয়েছিল

Answer 25

আমার সাথে এরকম কিছু ঘটেছে ...

আমি লিখেছিলাম:

{response.isDisplayOptions &&
{element}
}

এটি একটি ডিভের ভিতরে স্থাপন করা এটি স্থির করে:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

Answer 26

পাওয়া গেছে: কী দিয়ে বস্তু

যার অর্থ আপনি কোনও কিছুকে পাস করা একটি মূল-মান। সুতরাং আপনাকে আপনার হ্যান্ডলারটি সংশোধন করতে হবে:

থেকে

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

প্রতি

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

আপনি বন্ধনীগুলি মিস করেছেন ( {})।

Comments

বিশ্বাস করতে পারছি না এই সমস্যাটি ছিল

— কুশাল

আমিও অবাক। কী ইস্যুটির কারণ এটি এখনও তা বুঝতে পারেনি

— আরুল মণি

Answer 27

আমার ক্ষেত্রে, আমি আমার শিশু ফাংশন উপাদানটিতে একটি এসিঙ্ক যুক্ত করেছি এবং এই ত্রুটির মুখোমুখি হয়েছি। সন্তানের উপাদান সহ অ্যাসিঙ্ক ব্যবহার করবেন না।

Answer 28

ফায়ারবেস ব্যবহারের ক্ষেত্রে, যদি এটি importস্টেটমেন্টের শেষে রেখে কাজ না করে তবে আপনি সেইটিকে জীবনচক্র পদ্ধতির কোনও একটিতে রেখে দেওয়ার চেষ্টা করতে পারেন, এটি আপনি ভিতরে রেখে দিতে পারেন componentWillMount()।

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Answer 29

Invariant Violation: Objects are not valid as a React child আমার সাথে এমন একটি উপাদান ব্যবহার করার সময় ঘটেছে যা এ renderItemপ্রপস , যেমন:

renderItem={this.renderItem}

এবং আমার ভুলটি ছিল আমার renderItemপদ্ধতি তৈরি করা async।

Answer 30

আমার ত্রুটিটি এটি এইভাবে লেখার কারণে হয়েছিল:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

পরিবর্তে:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

এর অর্থ আমি এর মধ্যে থাকা মানের পরিবর্তে অবজেক্টটি রেন্ডার করার চেষ্টা করছি।

সম্পাদনা করুন: এটি দেশীয় নয় প্রতিক্রিয়ার জন্য।