2017-12-29 7 views
1

私は名前と電子メールを持つユーザーの配列を持っています。私はUserboxこの私に奇妙なエラーを与える反応。何が起こっているのか理解していないようです

return(<div>{  
       users.map((user)=>{ 
        return <UserBox key={user.name} user={user}></UserBox>; 
       }) 
       } 
       </div> 
      ); 

のように、この配列をループしていた親コンポーネントで この

return (
      <p> 
       {this.props.user.name} {this.props.user.rating} 
      </p> 
     ); 

と子コンポーネントですが、私はこのエラーをあなたに

Uncaught Error: Objects are not valid as a React child (found: object with keys {s, e, c}). If you meant to render a collection of children, use an array instead. 
    in p (at UserBox.js:15) 
    in UserBox (at Users.js:30) 
    in div (at Users.js:27) 
    in Users (created by Connect(Users)) 
    in Connect(Users) (at Dashboard.js:18) 
    in div (at Dashboard.js:15) 
    in div (at Dashboard.js:14) 
    in main (at Dashboard.js:13) 
    in Dashboard (created by UserIsAuthenticated(Dashboard)) 
    in UserIsAuthenticated(Dashboard) (created by Connect(UserIsAuthenticated(Dashboard))) 
    in Connect(UserIsAuthenticated(Dashboard)) (created by RouterContext) 
    in div (at App.js:39) 
    in App (created by RouterContext) 
    in RouterContext (created by Router) 
    in Router (at index.js:33) 
    in Provider (at index.js:32) 
    at invariant (invariant.js:42) 
    at throwOnInvalidObjectType (react-dom.development.js:6748) 
    at createChild (react-dom.development.js:7012) 
    at reconcileChildrenArray (react-dom.development.js:7282) 
    at reconcileChildFibers (react-dom.development.js:7651) 
    at reconcileChildrenAtExpirationTime (react-dom.development.js:7756) 
    at reconcileChildren (react-dom.development.js:7747) 
    at updateHostComponent (react-dom.development.js:7998) 
    at beginWork (react-dom.development.js:8229) 
    at performUnitOfWork (react-dom.development.js:10224) 
+0

'this.props.user.name'または' {this.props.user.rating} 'はほぼ確実にオブジェクトです。それらが実際にどのように見えるかを確認してください。 – Andrew

+0

コンポーネントをself closingとして使用する

答えて

2

を取得していますユーザーボックスコンポーネント:

return (
    <p> 
    {this.props.user.name} {this.props.user.rating} 
    </p> 
); 

this.props.user.nameまたはthis.props.user.rating文字列なくオブジェクトであることを確認します。

+0

この値はreduxから来ていますが、私はどのように動作しているのですか?

{this.props.team.name.toString()} {this.props.team.rating.toString()}

関連する問題