การละเมิดที่ไม่คงที่: วัตถุไม่ถูกต้องในฐานะลูกที่ตอบโต้

ในฟังก์ชั่นการเรนเดอร์องค์ประกอบของฉันฉันมี:

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, เป้าหมาย, currentTarget ชนิด, เหตุการณ์, ฟองสบู่, ยกเลิกได้, timeStamp, defaultPrevented, isTrusted, view , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, ปุ่ม, ปุ่ม, ปุ่มที่เกี่ยวข้อง, เป้าหมาย X, pageY, pageD, isDefaultPrevented, isPropagationStopped, _dispatchID หากคุณต้องการสร้างการแสดงชุดของเด็ก ๆ ให้ใช้อาร์เรย์แทนหรือล้อมรอบวัตถุโดยใช้ createFragment (object) จาก Add-on ของ React Welcomeตรวจสอบการแสดงผลของวิธีการ

ถ้าฉันเปลี่ยนไปthis.onItemClick.bind(this, item)เป็น(e) => onItemClick(e, item)ภายในฟังก์ชั่นแผนที่ทุกอย่างทำงานได้ตามที่คาดไว้

หากใครบางคนสามารถอธิบายสิ่งที่ฉันทำผิดและอธิบายว่าทำไมฉันถึงได้รับข้อผิดพลาดนี้จะดีมาก

UPDATE 1:
ฟังก์ชั่น onItemClick มีดังต่อไปนี้และการลบ this.setState ส่งผลให้เกิดข้อผิดพลาดหายไป

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

แต่ฉันไม่สามารถลบบรรทัดนี้ได้เนื่องจากฉันต้องการอัปเดตสถานะขององค์ประกอบนี้

ฉันมีข้อผิดพลาดนี้และกลายเป็นว่าฉันไม่ได้ตั้งใจรวมถึงวัตถุในรหัส JSX ของฉันที่ฉันคาดว่าจะเป็นค่าสตริง:

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

breadcrumbElementเคยเป็นสตริง แต่เนื่องจาก refactor ได้กลายเป็นวัตถุ น่าเสียดายที่ข้อความแสดงข้อผิดพลาดของ React ทำงานได้ไม่ดีในการนำฉันไปที่บรรทัดที่มีปัญหา ฉันต้องติดตามสแต็กของฉันตลอดทางสำรองจนกว่าฉันจะรู้ว่า "อุปกรณ์ประกอบฉาก" ที่ถูกส่งผ่านไปยังส่วนประกอบแล้วฉันก็พบรหัสที่กระทำผิด

คุณจะต้องอ้างอิงคุณสมบัติของวัตถุที่เป็นค่าสตริงหรือแปลงวัตถุเป็นตัวแทนสตริงที่ต้องการ ตัวเลือกหนึ่งอาจเป็นได้JSON.stringifyหากคุณต้องการดูเนื้อหาของวัตถุ

ดังนั้นฉันได้รับข้อผิดพลาดนี้เมื่อพยายามแสดงcreatedAtคุณสมบัติซึ่งเป็นวัตถุวันที่ ถ้าคุณต่อ.toString()ท้ายแบบนี้มันจะทำการแปลงและกำจัดข้อผิดพลาด เพียงโพสต์สิ่งนี้เป็นคำตอบที่เป็นไปได้ในกรณีที่คนอื่นพบปัญหาเดียวกัน:

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

ฉันเพิ่งได้รับข้อผิดพลาดเดียวกัน แต่เนื่องจากข้อผิดพลาดที่แตกต่างกัน: ฉันใช้วงเล็บปีกกาคู่เช่น:

{{count}}

เพื่อแทรกค่าcountแทนที่ถูกต้อง:

{count}

ซึ่งคอมไพเลอร์น่าจะกลายเป็น{{count: count}}กล่าวคือพยายามที่จะแทรกวัตถุเป็นลูกที่ทำปฏิกิริยา

แค่คิดว่าฉันจะเพิ่มในสิ่งนี้เนื่องจากฉันมีปัญหาเดียวกันในวันนี้ปรากฎว่าเป็นเพราะฉันกลับมาแค่ฟังก์ชั่นเมื่อฉันห่อมันใน<div>แท็กมันเริ่มทำงานดังต่อไปนี้

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

ข้างต้นทำให้เกิดข้อผิดพลาด ฉันแก้ไขปัญหาโดยเปลี่ยนreturn()หัวข้อเป็น:

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

... หรือเพียงแค่:

return gallerySection

React เด็ก (เอกพจน์) ควรจะเป็นประเภทของดั้งเดิมชนิดข้อมูลไม่คัดค้านหรือมันอาจจะเป็นแท็ก 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 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; (จากแหล่งที่มาด้านล่าง): ตรวจสอบให้แน่ใจว่ารายการทั้งหมดที่คุณแสดงใน JSX นั้นเป็นแบบดั้งเดิมและไม่ใช่วัตถุเมื่อใช้ React ข้อผิดพลาดนี้มักจะเกิดขึ้นเนื่องจากฟังก์ชั่นที่เกี่ยวข้องในการส่งเหตุการณ์ได้รับประเภทวัตถุที่ไม่คาดคิด (เช่นการส่งวัตถุเมื่อคุณผ่านสตริง) หรือส่วนหนึ่งของ JSX ในองค์ประกอบของคุณไม่ได้อ้างอิงแบบดั้งเดิม (เช่น this.props vs this.props.name)

แหล่งที่มา - codingbismuth.com

ฉันจะทำอย่างไรกับการใส่วงเล็บปีกกาโดยไม่จำเป็นรอบ ๆ ตัวแปรที่ถือองค์ประกอบ HTML ในคำสั่ง return ของฟังก์ชัน render () สิ่งนี้ทำให้ React ถือเป็นวัตถุแทนที่จะเป็นองค์ประกอบ

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

  return (
    {element}
  )
}

เมื่อฉันลบวงเล็บปีกกาออกจากองค์ประกอบข้อผิดพลาดได้หายไปและองค์ประกอบถูกแสดงอย่างถูกต้อง

ฉันต้องลืมวงเล็บปีกการอบอุปกรณ์ประกอบฉากที่ถูกส่งไปยังส่วนที่นำเสนอ:

ก่อน:

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

หลังจาก

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

ฉันก็รับ "ข้อผิดพลาดวัตถุที่ไม่ถูกต้องเป็นเด็ก React" และสำหรับฉันสาเหตุมาจากการเรียกฟังก์ชั่นอะซิงโครนัสใน 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>
        );
    }
}

สิ่งที่ฉันเรียนรู้คือไม่รองรับการเรนเดอร์แบบอะซิงโครนัส ทีมงานตอบสนองคือการทำงานในการแก้ปัญหาเป็นเอกสารที่นี่

สำหรับใครก็ตามที่ใช้ Firebase กับ Android นี่เป็นการทำลาย Android เท่านั้น การจำลอง iOS ของฉันเพิกเฉย

และตามที่โพสต์โดย Apoorv Bankey ด้านบน

อะไรก็ตามที่อยู่เหนือ Firebase V5.0.3 สำหรับ Android, atm นั้นเป็นสิ่งที่ขาดไม่ได้ การแก้ไข:

npm i --save firebase@5.0.3

ยืนยันหลายครั้งที่นี่ https://github.com/firebase/firebase-js-sdk/issues/871

ฉันมีปัญหาเดียวกัน แต่ความผิดพลาดของฉันก็ช่างโง่เหลือเกิน ฉันพยายามเข้าถึงวัตถุโดยตรง

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

}

ถ้าด้วยเหตุผลบางอย่างคุณนำเข้า firebase npm i --save firebase@5.0.3จากนั้นลองใช้ นี่เป็นเพราะการแตกของ firebase เป็นปฏิกริยาพื้นเมืองดังนั้นการรันจะแก้ไขได้

ในกรณีของฉันมันฉันลืมคืนองค์ประกอบ html frm ฟังก์ชั่นการแสดงผลและฉันกลับวัตถุ สิ่งที่ฉันทำคือฉันเพิ่งห่อ {items} ด้วยองค์ประกอบ html - div แบบง่าย ๆ ด้านล่าง

<ul>{items}</ul>

ฉันมีปัญหาเดียวกันเพราะฉันไม่ได้ใส่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>
    );
}

ฉันได้รับข้อผิดพลาดเดียวกันฉันเปลี่ยนสิ่งนี้

export default withAlert(Alerts)

สำหรับสิ่งนี้

export default withAlert()(Alerts).

ในอดีตรุ่นเก่ารหัสเดิมก็โอเค แต่ในรุ่นต่อมามันโยนข้อผิดพลาด ดังนั้นใช้รหัสในภายหลังเพื่อหลีกเลี่ยงความผิดพลาด

ในกรณีของฉันเกิดข้อผิดพลาดขึ้นเพราะฉันคืนองค์ประกอบอาร์เรย์เป็นวงเล็บปีกกาแทนที่จะส่งคืนอาร์เรย์เอง

รหัสที่มีข้อผิดพลาด

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

คุณแค่ใช้กุญแจของวัตถุแทนที่จะเป็นวัตถุทั้งหมด!

รายละเอียดเพิ่มเติมสามารถดูได้ที่นี่: 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>

ฉันมีปัญหาเดียวกันในกรณีของฉันฉันอัพเดตสถานะreduxและพารามิเตอร์ข้อมูลใหม่ไม่ตรงกับพารามิเตอร์เก่าดังนั้นเมื่อฉันต้องการเข้าถึงบางพารามิเตอร์ผ่านข้อผิดพลาดนี้

บางทีประสบการณ์นี้อาจช่วยใครซักคน

หากคุณกำลังใช้ Firebase และพบข้อผิดพลาดนี้เป็นสิ่งที่คุ้มค่าที่จะตรวจสอบว่าคุณนำเข้าถูกต้องหรือไม่ ตั้งแต่เวอร์ชัน 5.0.4 คุณต้องนำเข้าสิ่งนี้:

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

ใช่ฉันรู้. ฉันเสียเวลาไป 45 นาทีเช่นกัน

โดยทั่วไปสิ่งนี้จะปรากฏขึ้นเพราะคุณไม่ได้ทำการปรับโครงสร้างอย่างถูกต้อง นำรหัสนี้มาเป็นตัวอย่าง:

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

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

เรากำลังประกาศด้วย= text =>param แต่จริงๆแล้ว React คาดหวังว่าสิ่งนี้จะเป็นpropsวัตถุที่ครอบคลุมทั้งหมด

ดังนั้นเราควรทำอะไรแบบนี้:

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

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

สังเกตเห็นความแตกต่าง? propsพระรามที่นี่อาจจะชื่ออะไร ( propsเป็นเพียงการประชุมที่ตรงกับศัพท์) เป็นเพียงการตอบสนองความคาดหวังว่าวัตถุที่มีกุญแจและ Vals

ด้วยการทำลายวัตถุคุณสามารถทำได้และมักจะเห็นสิ่งนี้:

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

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

... ซึ่งใช้งานได้ดี

โอกาสที่ทุกคนสะดุดเมื่อเพิ่งประกาศอุปกรณ์ประกอบฉากของพวกเขาโดยไม่ตั้งใจโดยไม่ทำลาย

ฉันแค่ทำให้ตัวเองผ่านข้อผิดพลาดรุ่นที่โง่มากซึ่งฉันอาจแชร์ที่นี่เพื่อลูกหลาน

ฉันมี JSX เช่นนี้:

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

ฉันต้องการแสดงความคิดเห็นนี้เพื่อแก้ไขข้อบกพร่องบางอย่าง ฉันใช้แป้นพิมพ์ลัดใน IDE ซึ่งทำให้เกิดสิ่งนี้:

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

ซึ่งแน่นอนว่าไม่ถูกต้อง - วัตถุนั้นไม่ถูกต้องเนื่องจากมีปฏิกิริยากับเด็ก ๆ !

ฉันต้องการเพิ่มโซลูชันอื่นให้กับรายการนี้

รายละเอียด:

• "ตอบสนอง": "^ 16.2.0",
• "react-dom": "^ 16.2.0",
• "react-redux": "^ 5.0.6",
• "react-สคริปต์": "^ 1.0.17",
• "redux": "^ 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));

ปัญหาเกิดขึ้นเพราะน้ำหนักบรรทุกที่ถูกส่งรายการที่เป็นวัตถุ เมื่อฉันออกตัวแปรน้ำหนักบรรทุกและใส่ค่า userInput ลงทุกอย่างจัดส่งเริ่มทำงานตามที่คาดไว้

หากในกรณีที่คุณใช้ Firebase ไฟล์ใด ๆ ในโครงการของคุณ จากนั้นให้ใส่คำสั่ง firebase ที่ท้าย!

ฉันรู้ว่ามันฟังดูบ้า แต่ลอง !!

ปัญหาของฉันนั้นง่ายเมื่อฉันพบข้อผิดพลาดต่อไปนี้:

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

หากใช้ส่วนประกอบไร้สัญชาติให้ทำตามรูปแบบดังกล่าว:

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

ดูเหมือนว่าจะได้ผลสำหรับฉัน

บางสิ่งเช่นนี้เพิ่งเกิดขึ้นกับฉัน ...

ฉันเขียน:

{response.isDisplayOptions &&
{element}
}

วางไว้ใน div แก้ไขมัน:

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

พบ: วัตถุด้วยกุญแจ

ซึ่งหมายความว่าคุณผ่านบางสิ่งเป็นคีย์ - ค่า ดังนั้นคุณต้องแก้ไขตัวจัดการของคุณ:

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

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

คุณพลาดวงเล็บปีกกา ( {})

ในกรณีของฉันฉันเพิ่ม async ให้กับองค์ประกอบฟังก์ชั่นลูกของฉันและพบข้อผิดพลาดนี้ อย่าใช้ async กับองค์ประกอบลูก

ในกรณีของการใช้ Firebase ถ้ามันไม่ทำงานโดยการใส่ในตอนท้ายของงบแล้วคุณสามารถพยายามที่จะนำที่หนึ่งภายในของวิธีวงจรชีวิตนั่นคือคุณสามารถวางไว้ภายในimportcomponentWillMount()

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

Invariant Violation: Objects are not valid as a React childเกิดขึ้นกับฉันเมื่อใช้ส่วนประกอบที่ต้องการrenderItemอุปกรณ์ประกอบฉากเช่น:

renderItem={this.renderItem}

และความผิดพลาดของผมคือการทำให้ฉันวิธีrenderItemasync

ข้อผิดพลาดของฉันเป็นเพราะการเขียนด้วยวิธีนี้:

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

หมายความว่าฉันพยายามแสดงวัตถุแทนค่าที่อยู่ภายใน

แก้ไข: นี่คือสำหรับการตอบสนองไม่ได้มีถิ่นกำเนิด