Invarian Pelanggaran: benda-Benda yang tidak valid sebagai Bereaksi anak

Saya mengalami kesalahan ini dan ternyata bahwa aku tidak sengaja termasuk Objek di BEJ kode yang saya harapkan untuk menjadi nilai string:

return (

        {breadcrumbElement}

)

breadcrumbElement digunakan untuk menjadi string tapi karena refactor telah menjadi sebuah Objek. Sayangnya, Bereaksi's pesan kesalahan didn't melakukan pekerjaan yang baik dalam menunjuk saya untuk garis di mana masalah yang ada. Aku harus mengikuti jejak stack semua jalan kembali sampai aku mengenali "alat peraga" diteruskan ke komponen dan kemudian saya menemukan kode menyinggung.

Anda'll perlu referensi properti dari objek yang nilai string atau mengkonversi Objek untuk representasi string yang diinginkan. Salah satu pilihan yang mungkin JSON.stringify jika anda benar-benar ingin melihat isi dari Objek.

Jadi saya punya kesalahan ini ketika mencoba untuk menampilkan createdAt property yang merupakan objek Tanggal. Jika anda menggabungkan .toString() di akhir seperti ini, ia akan melakukan konversi dan menghilangkan kesalahan. Hanya postingan ini sebagai jawaban yang mungkin dalam kasus orang lain berlari ke dalam masalah yang sama:

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

Aku hanya punya kesalahan yang sama namun karena berbagai kesalahan: saya menggunakan dua kawat gigi seperti:

{{count}}

untuk menyisipkan nilai hitung, bukan yang benar:

{count}

yang kompilator mungkin berubah menjadi {{count: menghitung}}, yaitu mencoba untuk memasukkan sebuah Objek sebagai Bereaksi anak.

Hanya pikir saya akan menambahkan untuk ini karena saya memiliki masalah yang sama hari ini, ternyata bahwa itu karena aku kembali hanya fungsi, ketika saya dibungkus dalam <div> tag itu mulai bekerja, seperti di bawah ini

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

Di atas menyebabkan kesalahan. Saya tetap masalah dengan mengubah return() bagian untuk:

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

...atau hanya:

return gallerySection

Saya harus melakukan dengan tidak perlu menempatkan kurung kurawal sekitar variabel memegang sebuah elemen HTML di dalam pernyataan return dari render() fungsi. Hal ini membuat Bereaksi memperlakukannya sebagai obyek daripada sebuah elemen.

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

  return (
    {element}
  )
}

Setelah saya dihapus kurung kurawal dari elemen, kesalahan itu pergi, dan elemen diberikan dengan benar.

Saya harus melakukan dengan melupakan kurung kurawal seluruh alat peraga yang dikirim ke presentasi komponen:

Sebelumnya:

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

Setelah

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

Bereaksi anak(tunggal) harus jenis primitif tipe data bukan objek atau ini bisa menjadi JSX tag(yang tidak dalam kasus kami). Gunakan Proptypes paket dalam pengembangan untuk memastikan validasi terjadi.

Hanya potongan kode(BEJ) perbandingan untuk mewakili anda dengan ide :

1. Kesalahan : Dengan objek yang diwariskan ke anak

TLDR; (Dari sumber di bawah ini) : pastikan semua barang-barang anda're rendering di BEJ adalah primitif dan tidak benda ketika menggunakan Bereaksi. Kesalahan ini biasanya terjadi karena fungsi yang terlibat dalam pengiriman sebuah acara yang telah diberikan tak terduga jenis objek (saya.e lewat sebuah objek ketika anda harus melewati sebuah string) atau bagian dari JSX dalam komponen anda tidak referensi primitif (yaitu ini.alat peraga lebih baik dari ini.alat peraga.nama).

Sumber - codingbismuth.com

Bagi siapa pun yang menggunakan Firebase dengan Android, ini hanya istirahat Android. IOS saya emulasi mengabaikan hal itu.

Dan seperti yang diposting oleh Apoorv Bankey di atas.

Apa pun di atas Firebase V5.0.3, untuk Android, atm adalah payudara. Fix:

npm i --save firebase@5.0.3

Dikonfirmasi berkali-kali di sini https://github.com/firebase/firebase-js-sdk/issues/871

Saya juga mendapatkan "Benda yang tidak valid sebagai Bereaksi anak" kesalahan dan bagi saya penyebabnya adalah karena panggilan asynchronous fungsi di BEJ. Lihat di bawah ini.

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

Apa yang saya pelajari adalah bahwa asynchronous rendering tidak didukung dalam Bereaksi. Yang Bereaksi tim yang bekerja pada sebuah solusi seperti yang didokumentasikan di sini.

Saya juga punya masalah yang sama tapi kesalahan saya begitu bodoh. Saya mencoba untuk mengakses objek secara langsung.

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

}

Jika untuk beberapa alasan anda impor firebase. Kemudian coba jalankan npm saya-simpan firebase@5.0.3. Hal ini karena firebase istirahat bereaksi-asli, sehingga berjalan ini akan memperbaikinya.

Dalam kasus saya itu saya lupa untuk kembali sebuah elemen html frm membuat fungsi dan aku kembali sebuah objek . Apa yang saya lakukan adalah hanya dibungkus {item} dengan elemen html - div sederhana seperti di bawah ini

<ul>{items}</ul>

Kau hanya menggunakan tombol objek, bukan seluruh objek!

Rincian lebih lanjut dapat ditemukan di sini: 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>

Saya memiliki masalah yang sama, dalam kasus saya, Saya meng-update redux negara, dan baru data parameter yang tidak sesuai dengan parameter lama, Jadi ketika saya ingin mengakses beberapa parameter melalui Kesalahan ini,

Mungkin pengalaman ini membantu seseorang

Masalah saya itu sederhana ketika saya menghadapi galat berikut:

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

hanya bahwa aku sedang melewati sebuah objek dengan tombol yang ditentukan dalam kesalahan ketika mencoba untuk membuat objek secara langsung pada komponen menggunakan {benda} mengharapkan untuk menjadi string

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

sementara render pada Bereaksi Komponen, saya menggunakan sesuatu seperti di bawah ini

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

tapi seharusnya

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

I'd ingin menambahkan solusi lain untuk daftar ini.

Spesifikasi:

• "bereaksi": "^16.2.0",
• "bereaksi-dom": "^16.2.0",
• "bereaksi-redux": "^5.0.6",
• "bereaksi-script": "^1.0.17",
• "redux": "^3.7.2"

Saya mengalami kesalahan yang sama:

Tertangkap Error: benda-Benda yang tidak valid sebagai Bereaksi anak (ditemukan: objek dengan tombol {XXXXX}). Jika anda bermaksud untuk membuat koleksi dari anak-anak, menggunakan array sebagai gantinya.

Ini kode saya:

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

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

Solusi:

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

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

Masalah itu terjadi karena muatan mengirim item sebagai objek. Ketika aku melepaskan muatan variabel dan menempatkan userInput nilai ke pengiriman segala sesuatu mulai bekerja seperti yang diharapkan.

Jika menggunakan bernegara komponen, ikuti format semacam ini:

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

Hal ini tampaknya bekerja untuk saya

Jika dalam kasus anda menggunakan Firebase salah satu file dalam proyek anda. Kemudian hanya tempat yang impor firebase pernyataan di akhir!!

Aku tahu ini terdengar gila, tapi cobalah!!

Ditemukan: objek dengan tombol

Yang berarti anda melewati sesuatu adalah kunci-nilai. Jadi, anda perlu mengubah handler:

dari

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

untuk

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

Anda melewatkan keluar kurawal ({}).

Aku punya kesalahan yang sama, aku berubah ini

ekspor default withAlert(Alert)

ini

ekspor default withAlert()(Alert).

Dalam versi yang lebih tua mantan kode ok , tapi di versi melempar kesalahan. Jadi gunakan kemudian kode untuk menghindari errror.