javascript شرح - انتهاك ثابت:الكائنات غير صالحة كطفل React




ماهو ترجمة (9)

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

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

}

ما ورد أعلاه سبّب الخطأ ، وتغيير قسم الإرجاع () إلى:

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

حل المشكلة

في وظيفة تقديم المكون الخاص بي لدي:

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

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

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

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

تحديث 1:
وظيفة onItemClick كما يلي وإزالة هذه النتائج .setState تختفي.

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

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


لذلك حصلت على هذا الخطأ عند محاولة عرض الخاصية createdAt التي هي كائن تاريخ. إذا قمت .toString() على النهاية مثل هذا ، فإنه سيتم إجراء التحويل وإزالة الخطأ. مجرد نشر هذا كإجابة محتملة في حالة أي شخص آخر واجه نفس المشكلة:

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

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

قبل:

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

بعد

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

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

{{count}}

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

{count}

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


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

المواصفات:

  • "رد": "^ 16.2.0" ،
  • "react-dom": "^ 16.2.0" ،
  • "react-redux": "^ 5.0.6" ،
  • "script-scripts": "^ 1.0.17" ،
  • "redux": "^ 3.7.2"

صادفت نفس الخطأ:

خطأ غير مسجلين: الكائنات غير صالحة كطفل React (تم العثور عليها: object with keys {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 في كل شيء بدأ الإرسال يعمل كما هو متوقع.


اضطرتني المهمة إلى وضع أقواس معقوفة بدون داع حول متغير يحمل عنصر HTML داخل بيان الإرجاع لوظيفة التقديم (). هذا جعل React تعامله ككائن بدلاً من عنصر.

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

  return (
    {element}
  )
}

بمجرد إزالة الأقواس المتعرجة من العنصر ، تم اختفاء الخطأ ، وتم عرض العنصر بشكل صحيح.


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

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

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

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

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

وهو ، بالطبع ، غير صالح - الأشياء غير صالحة كرد فعل للأطفال!


كنت مجرد استخدام مفاتيح الكائن ، بدلا من الكائن كله!

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


حل ES6

باستخدام Array#some و Object.keys . سيعود صحيح إذا كان يوجد مفتاح موجود في الكائن أو خطأ إذا لم يكن موجودًا.

var obj = {foo: 'one', bar: 'two'};
    
function isKeyInObject(obj, key) {
    var res = Object.keys(obj).some(v => v == key);
    console.log(res);
}

isKeyInObject(obj, 'foo');
isKeyInObject(obj, 'something');

مثال على سطر واحد.

console.log(Object.keys({foo: 'one', bar: 'two'}).some(v => v == 'foo'));





javascript reactjs