unveränderliche Verletzung: Objekte gelten nicht als ein Kind reagieren (für verschachtelte Objekte)

Question

in meinem reagiert Komponente habe ich ein Objekt user die

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

wie

aussieht und dann in meinem Code ich angeben, dass es sich um ein Objekt .

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

Aber wenn ich den Code der Fehlermeldung ausgeführt sagt:

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....

es scheint, dass ich so etwas wie createFragment(user) tun kann. Aber das funktioniert nicht für mich, weil dieses Objekt viele verschachtelte Objekte wie oben hat.

Weiß jemand, wie das lösen?

Answer 1

In dieser Zeile übergeben Sie den Wert object Typ.

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

In Ihrem Fall user müssen oder array Art von React elements einen string Typ oder React component (von React.createElement erstellt) sein.

Wenn Sie einige Daten von Benutzer machen müssen oder an eine andere Komponente zu übergeben, können Sie dies tun:

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

Und natürlich haben Sie User reagieren Komponente zu definieren, was Griff (render) Eigenschaften des Benutzerobjekts. In User Komponente können wir user Objekt durch this.props.data