Invariant Violazione: Gli oggetti non sono validi come React bambino (per gli oggetti nidificati)

Question

nel mio reagiscono componente Ho un oggetto user che assomiglia

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

E poi nel mio codice a specificare che si tratta di un oggetto .

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

Ma quando si esegue il codice il messaggio di errore dice:

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

sembra che io possa fare qualcosa di simile createFragment(user). Ma questo non funziona per me perché questo oggetto ha molti oggetti nidificati come sopra.

Qualcuno sa come risolvere questo?

Answer 1

In questa riga si passa il valore del tipo object.

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

Nel tuo caso user deve essere un tipo string o React component (creato da React.createElement) o array tipo di React elements.

Se avete bisogno di rendere alcuni dati da utente o passarlo a un altro componente, è possibile farlo:

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

E, naturalmente, è necessario definire User reagire componente, che gestiscono (rendering) proprietà dell'oggetto utente. Nel componente User è possibile ottenere l'oggetto user tramite this.props.data