javascript - ماهو - react.js download




انتهاك ثابت: الكائنات غير صالحة كطفل React (20)

في وظيفة عرض المكون لدي:

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> أتلقى الخطأ التالي:

خطأ غير معروف: انتهاك ثابت: الكائنات غير صالحة كطفل تفاعلي (موجود: كائن مع مفاتيح {dispatchConfig، dispatchMarker، nativeEvent، target، currentTarget، type، eventPhase، الفقاعات، يمكن إلغاؤه، timeStamp، defaultPrevented، isTrusted، view، details، screenX ، screenY، clientX، clientY، ctrlKey، shiftKey، altKey، metaKey، getModifierState، button، buttons، relatedTarget، pageX، pageY، isDefaultPrevented، isPropagationStoded، _dispatchListeners، _dispatchIDs}). إذا كنت تقصد تقديم مجموعة من الأطفال ، فاستخدم صفيفًا بدلاً من ذلك أو لف الكائن باستخدام createFragment (كائن) من الوظائف الإضافية React. تحقق من طريقة تقديم Welcome .

إذا قمت بالتغيير إلى this.onItemClick.bind(this, item) إلى (e) => onItemClick(e, item) داخل الخريطة (e) => onItemClick(e, item) شيء يعمل كما هو متوقع.

إذا كان شخص ما يمكن أن يفسر ما أفعله خطأ وشرح لماذا أتلقى هذا الخطأ ، سيكون أمرا رائعا

التحديث 1:
وظيفة onItemClick هي كما يلي وإزالة this.setState يؤدي إلى اختفاء الخطأ.

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

لكن لا يمكنني إزالة هذا السطر لأنني بحاجة إلى تحديث حالة هذا المكون


  1. ما يحدث هو تنفيذ وظيفة onClick التي تحاول تنفيذها على الفور.

  2. نظرًا لأن الكود الخاص بنا ليس HTML ، فإنه javascript وبالتالي يتم تفسيره كعمل تنفيذي.

  3. تأخذ وظيفة onClick وظيفة كوسيطة وليس تنفيذ وظيفة.

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

سيؤدي هذا إلى تحديد وظيفة onClick في عنصر القائمة والتي سيتم تنفيذها بعد النقر عليها في أقرب وقت يتم عرض المكون الخاص بنا.


أنا أيضًا أحصل على هذا الخطأ "الكائنات غير صالحة كطفل تابع لرد الفعل" وكان السبب بالنسبة لي هو استدعاء وظيفة غير متزامنة في JSX. انظر أدناه.

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

ما تعلمته هو أن العرض غير المتزامن غير معتمد في React. يعمل فريق React على حل كما هو موثق هنا .


أنا فقط وضعت نفسي من خلال نسخة سخيفة حقا من هذا الخطأ ، والتي قد أشارك هنا أيضا للأجيال القادمة.

كان لدي بعض JSX مثل هذا:

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

كنت بحاجة إلى تعليق هذا لتصحيح شيء ما. لقد استخدمت اختصار لوحة المفاتيح في IDE الخاص بي ، مما أدى إلى هذا:

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

وهو بالطبع غير صالح - الكائنات غير صالحة كرد فعل للأطفال!


أود إضافة حل آخر لهذه القائمة.

المواصفات:

  • "رد فعل": "^ 16.2.0" ،
  • "react-dom": "^ 16.2.0" ،
  • "react-redux": "^ 5.0.6" ،
  • "تفاعلات البرامج النصية": "^ 1.0.17" ،
  • "مسترجع": "^ 3.7.2"

لقد واجهت نفس الخطأ:

خطأ Uncaught: الكائنات غير صالحة كطفل React (تم العثور عليها: كائن مع مفاتيح {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));

كانت المشكلة تحدث لأن الحمولة كانت ترسل العنصر ككائن. عندما قمت بإزالة متغير الحمولة الصافية ووضع قيمة userInput في إيفاد كل شيء بدأ العمل كما هو متوقع.


إذا كنت تستخدم Firebase ورأيت هذا الخطأ ، فمن المفيد التحقق مما إذا كنت تقوم باستيراده بشكل صحيح. بدءًا من الإصدار 5.0.4 ، يتعين عليك استيراده كما يلي:

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

نعم انا اعرف. لقد فقدت 45 دقيقة في هذا أيضا.


إذا كنت تستخدم مكونات عديمة الحالة ، فاتبع هذا التنسيق:

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

هذا يبدو للعمل بالنسبة لي


فقط قم بإنشاء عنصر JSX صالح. في حالتي قمت بتعيين مكون لكائن.

const AwesomeButtonComponent = () => <button>AwesomeButton</button>
const next = {
  link: "http://awesomeLink.com",
  text: "Awesome text",
  comp: AwesomeButtonComponent
}

في مكان آخر في الكود ، أردت تعيين هذا الزر ديناميكيًا.

return (
  <div>
    {next.comp ? next.comp : <DefaultAwesomeButtonComp/>}
  </div>
)

أنا حل هذا بإعلان شركات JSX التي قمت بتهيئتها عبر شركات الدعائم.

const AwesomeBtnFromProps = next.comp
return (
  <div>
    {next.comp ? <AwesomeBtnFromProps/> : <DefaultAwesomeButtonComp/>}
  </div>
)

في حالة استخدام Firebase ، إذا لم ينجح ذلك من خلال وضع في نهاية عبارات import فيمكنك محاولة وضع ذلك داخل إحدى طرق دورة الحياة ، أي أنه يمكنك وضعه داخل componentWillMount() .

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

كان خطأي بسبب كتابته بهذه الطريقة:

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

هذا يعني أنني كنت أحاول تقديم كائن بدلاً من القيمة الموجودة فيه.

تحرير: هذا هو رد فعل وليس الأصلي.


كان لي علاقة مع نسيان الأقواس المتعرجة حول الدعائم التي يتم إرسالها إلى عنصر العرض:

قبل:

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

بعد

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

كانت مشكلتي بسيطة عندما واجهت الخطأ التالي:

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

كان مجرد تمرير كائن باستخدام مفاتيح محددة في الخطأ أثناء محاولة عرض الكائن مباشرة في مكون باستخدام {object} متوقعًا أن يكون سلسلة

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

أثناء العرض على مكون React ، اعتدت على شيء مثل أدناه

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

ولكن كان ينبغي أن يكون

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

كانت مشكلتي خاصةً للغاية: في ملف .env بي ، وضعت تعليقًا في السطر الذي يتضمن عنوان URL الخاص بـ api:

API_URL=https://6ec1259f.ngrok.io #comment

سأحصل على خطأ Invariant violation عند محاولة تسجيل الدخول / التسجيل ، لأن عنوان uri لم يكن صالحًا.


كنت تستخدم فقط مفاتيح الكائن ، بدلاً من الكائن بأكمله!

يمكن الاطلاع على مزيد من التفاصيل هنا: 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>


لأي شخص يستخدم Firebase مع Android ، يؤدي ذلك إلى كسر Android فقط. يتجاهل مضاهاة iOS الخاصة بي.

وكما نشرت من قبل Apoorv Bankey أعلاه.

أي شيء أعلى من Firebase V5.0.3 ، لنظام Android ، فإن أجهزة الصراف الآلي تعد بمثابة تمثال نصفي. الإصلاح:

npm i --save [email protected].0.3

أكد عدة مرات هنا https://github.com/firebase/firebase-js-sdk/issues/871


لقد حدث لي شيء من هذا القبيل ...

كتبت:

{response.isDisplayOptions &&
{element}
}

وضعه داخل div إصلاحه:

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

لقد حصلت على نفس الخطأ ولكن بسبب خطأ مختلف: لقد استخدمت حمالات مزدوجة مثل:

{{count}}

لإدراج قيمة count بدلاً من الصحيح:

{count}

الذي تحول المحول البرمجي إلى {{count: count}} ، أي محاولة إدراج كائن كطفل React.


لقد حصلت على هذا الخطأ في تقديم شيء ما في مشغل ثلاثي. ماذا فعلت:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? {bar} : <div>blahblah</div>})
}

اتضح أنه يجب أن يكون شريط بدون الأقواس ، مثل:

render(){
  const bar = <div>asdfasdf</div>
  return ({this.state.foo ? bar : <div>blahblah</div>})
}

مجرد التفكير في أنني سأضيف إلى هذا الأمر لأنني واجهت نفس المشكلة اليوم ، اتضح أن ذلك كان لأنني كنت أعيد الوظيفة فقط ، عندما لفتها في علامة <div> بدأت العمل ، على النحو التالي

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

ما سبق تسبب في الخطأ. لقد أصلحت المشكلة عن طريق تغيير قسم return() إلى:

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

...أو ببساطة:

return gallerySection

Invariant Violation: Objects are not valid as a React child حدث renderItem لي عند استخدام مكون يحتاج إلى renderItem props ، مثل:

renderItem={this.renderItem}

وكان خطأي هو جعل طريقة renderItem .


يجب أن يكون React child (المفرد) نوعًا من أنواع البيانات primitive وليس كائنًا أو قد يكون علامة JSX (وهو ليس في حالتنا) . استخدم حزمة Proptypes في التطوير للتأكد من حدوث التحقق من الصحة.

مجرد مقارنة مقتطف الشفرة السريع (JSX) لتمثيلك مع الفكرة:

  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 is passed which is error--->>>{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. (من المصدر أدناه): تأكد من أن جميع العناصر التي تعرضها في JSX بدائية وليست كائنات عند استخدام React. يحدث هذا الخطأ عادةً بسبب إعطاء وظيفة متضمنة في إرسال حدث نوع كائن غير متوقع (أي تمرير كائن عندما يجب أن تمر سلسلة) أو أن جزءًا من JSX في المكون الخاص بك لا يشير إلى بدائية (أي this.props مقابل this.props.name).

المصدر - codingbismuth.com





reactjs