Inwariant Naruszenie: Obiekty nie są ważne jako React dziecka (dla obiektów zagnieżdżonych)

Question

w moim reagować składnik mam obiektu user który wygląda

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

a następnie w moim kodu I określić, że jest to obiekt .

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

Ale kiedy uruchomić kod komunikat o błędzie mówi:

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

wydaje się, że mogę zrobić coś podobnego createFragment(user). Ale to nie działa, ponieważ ten obiekt ma wiele zagnieżdżonych obiektów, takich jak powyższe.

Czy ktoś wie, jak rozwiązać ten problem?

Answer 1

W tym wierszu podaje się wartość typu object.

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

W twoim przypadku user musi być string typ lub React component (tworzone przez React.createElement) lub array typ React elements.

Jeśli potrzebujesz, aby uczynić jakieś dane od użytkownika lub przekazać go do innego składnika, można to zrobić:

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

I, oczywiście, trzeba określić User reagować składnik, którego uchwyt (render) właściwości obiektu użytkownika. W komponencie User możemy uzyskać obiekt user poprzez this.props.data