不変の違反：オブジェクトはReactの子としては無効です

私のコンポーネントのレンダー関数には、次のようなものがあります。

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、cancellable、timeStamp、defaultPrevented、isTrusted、view、detail、screenXを持つオブジェクト、screenY、clientX、clientY、ctrlKey、shiftKey、altKey、metaKey、getModifierState、button、buttons、relatedTarget、pageX、pageY、isDefaultPrevented、isPropagationStopped、_dispatchListeners、_dispatchIDs}）。子のコレクションをレンダリングする場合は、代わりに配列を使用するか、ReactアドオンのcreateFragment（object）を使用してオブジェクトをラップしてください。のレンダリング方法を確認してくださいWelcome。

map関数の内部に変更するthis.onItemClick.bind(this, item)と(e) => onItemClick(e, item)、すべてが期待どおりに機能します。

誰かが私が間違っていることを説明し、なぜこのエラーが発生するのかを説明できれば、すばらしいでしょう

更新1：
onItemClick関数は次のとおりであり、this.setStateを削除するとエラーが消えます。

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

しかし、このコンポーネントの状態を更新する必要があるため、この行を削除することはできません

このエラーが発生しましたが、文字列値であると予期していたJSXコードに誤ってオブジェクトを含めていたことがわかりました。

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

breadcrumbElement以前は文字列でしたが、リファクタリングによりオブジェクトになりました。残念ながら、Reactのエラーメッセージは、問題が存在する行を指摘するのに適切ではありませんでした。「小道具」がコンポーネントに渡されていることに気づき、問題のコードが見つかるまで、スタックトレースをたどる必要がありました。

文字列値であるオブジェクトのプロパティを参照するか、オブジェクトを望ましい文字列表現に変換する必要があります。1つのオプションはJSON.stringify、実際にオブジェクトの内容を見たい場合です。

そのcreatedAtため、Dateオブジェクトであるプロパティを表示しようとすると、このエラーが発生しました。.toString()このように最後に連結すると、変換が行われ、エラーが解消されます。他の誰かが同じ問題に遭遇した場合に備えて、これを可能な回答として投稿するだけです：

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

同じエラーが発生しましたが、別の間違いが原因でした。

{{count}}

count正しい値の代わりにの値を挿入するには：

{count}

コンパイラはおそらくに変わりました{{count: count}}。つまり、オブジェクトをReactの子として挿入しようとしています。

今日同じ問題があったので、これに追加すると思ったところ、関数だけを返していたことが原因であることがわかりました。<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; （以下のソースから）：Reactを使用する場合は、JSXでレンダリングするすべてのアイテムがプリミティブであり、オブジェクトではないことを確認してください。このエラーは通常、イベントのディスパッチに関係する関数に予期しないオブジェクトタイプ（文字列を渡す必要があるときにオブジェクトを渡す）が指定されているか、コンポーネントのJSXの一部がプリミティブを参照していないために発生します（つまりthis.props vs this.props.name）。

ソース-codingbismuth.com

鉱山は、render（）関数のreturnステートメント内のHTML要素を保持する変数の周りに不必要に中括弧を置くことと関係がありました。これにより、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>
        );
    }
}

私が学んだことは、非同期レンダリングはReactではサポートされていないということです。Reactチームは、ここに記載されている解決策に取り組んでいます。

AndroidでFirebaseを使用している人にとっては、これは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が反応ネイティブを破壊するため、これを実行すると修正されます。

私の場合は、render関数からhtml要素を返すのを忘れていて、オブジェクトを返していました。私がしたことは、{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命名法と一致しただけの慣習です）、単にキーとヴァルス持つオブジェクトを期待して反応します。

オブジェクトの分解により、次のようなことが可能になり、頻繁に表示されます。

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

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

...うまくいきます。

偶然、これに偶然出くわした人は、破壊せずに誤ってコンポーネントのプロップパラメータを宣言しただけです。

私はこのエラーの本当にばかげたバージョンを自分で試してみました。後世のためにここで共有することもできます。

私はこのようなJSXをいくつか持っていました：

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

何かをデバッグするには、これをコメント化する必要がありました。IDEでキーボードショートカットを使用した結果、次のようになりました。

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

もちろん、これは無効です-オブジェクトは子供たちの反応として有効ではありません！

このリストに別のソリューションを追加したいと思います。

スペック：

• "反応する"： "^ 16.2.0"、
• "反応-dom"： "^ 16.2.0"、
• "react-redux"： "^ 5.0.6"、
• "反応スクリプト"： "^ 1.0.17"、
• "redux"： "^ 3.7.2"

同じエラーが発生しました：

キャッチされないエラー：オブジェクトは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を使用してプロジェクト内のファイルのいずれか。次に、そのインポート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>
}

見つかった：キーを持つオブジェクト

つまり、何かを渡すことはKey-Valueです。したがって、ハンドラーを変更する必要があります。

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

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

中括弧（{}）を省略しました。

私の場合、子関数コンポーネントに非同期を追加したところ、このエラーが発生しました。子コンポーネントで非同期を使用しないでください。

Firebaseを使用している場合、importステートメントの最後に配置しても機能しない場合は、ライフサイクルメソッドの1つに配置することができますcomponentWillMount()。つまり、に配置できます。

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

Invariant Violation: Objects are not valid as a React child次のrenderItemような小道具を必要とするコンポーネントを使用しているときに私に起こりました：

renderItem={this.renderItem}

そして私の間違いは私のrenderItem方法を作ることでしたasync。

私のエラーはそれをこのように書いたためでした：

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

それは私がその中の値の代わりにオブジェクトをレンダリングしようとしていたことを意味しました。

編集：これはネイティブではなく反応のためのものです。