不変違反：オブジェクトは、私の中に（ネストされたオブジェクトのための）子供に反応

Question

コンポーネントを反応させて、私は

{ 
    _id: xxx, 
    stats: {a: 1, b: 2, c: 3}, 
    shops: [s1, s2, s3] // s1, s2, s3 are all objects 
    ... 
} 

のように見えます。そして、私のコードで、私はそれがオブジェクトであることを指定するオブジェクトuserを持って有効ではありません。

export class UserComponent extends React.Component<void, Props, void> { 
    static propTypes = { 
    user: PropTypes.array, 
    fetchProfile: PropTypes.func.isRequired 
    }; 

    componentDidMount() { 
    this.props.fetchProfile(); 
    } 

    render() { 
    const { user } = this.props; 
    return (
     <div className='container text-center'> 
     {user} 
     <Link to="/">homeE</Link> 
     </div> 
    ) 
    } 
} 

しかし、私はエラーメッセージが言うのコードを実行します。

invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {thumb, path, photo_id, shop_id, message, _id, date_added}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.invaria....

私がcreateFragment(user)ような何かを行うことができているようですが。しかし、このオブジェクトは上記のようなネストされたオブジェクトがたくさんあるので、これは私のためには機能しません。

どのようにこれを解決するか知っていますか？

Answer 1

この行には、objectタイプの値を渡します。

お使いの場合には

<div className='container text-center'> 
    {user} // this is an object 
    <Link to="/">homeE</Link> 
    </div> 

userはstringタイプまたはReact component（React.createElementによって作成された）、またはReact elementsのarray型でなければなりません。

ユーザーからいくつかのデータをレンダリングするか、別のコンポーネントにそれを渡す必要がある場合は、あなたがそうすることができます。

<div className='container text-center'> 
    <User data={user} /> 
    <Link to="/">homeE</Link> 
    </div> 

そして、もちろん、あなたがUserは（レンダリング）を処理コンポーネントを、反応定義する必要がありますユーザーオブジェクトのプロパティUserコンポーネントではuserオブジェクトからthis.props.data