にconsole.logは、I成分に反応している、私は「マップ」を生成「customers.map（顧客=>」と「顧客」要素の値をデバッグする必要コンポーネント

Question

を反応させる。

I」はこの

{ console.log (customer)} 

しかし、私は取得エラー "" の前に試してみましたveは、ここにコンポーネント：

const CustomersList = ({ data: {loading, error, customers }}) => { 
    if (loading) { 
     return <p style={{color:"red"}}>Loading ...</p>; 
    } 
    if (error) { 
     return <p>{error.message}</p>; 
    } 

    return (
     <div> 
      Customers List 
      { customers.map(customer => 
       (<div key={customer.id} >Hey {customer.firstname}</div>) 
      )} 
     </div> 
    ); 
}; 

Answer 1

block bodyための矢印機能付使用{}とBLと、その内部にconsole.logを置きますあなたはあなたがUI要素を返すためにリターンを使用する必要があります。このよう

：

{ 
    customers.map(customer => { 
     console.log(customer); 
     return <div key={customer.id} >Hey {customer.firstname}</div> 
    }) 
} 

MDN DOCあたりとして：

アロー機能 "は簡潔な体" または通常 "ブロック 体" のいずれかを持つことができます。

簡潔なボディでは、式だけが必要であり、暗黙的に が返されます。ブロック本体では、明示的な戻り値 ステートメントを使用する必要があります。

例：あなたは現在、暗黙のリターンと `map`を使用している

var func = x => x * x;     
// concise syntax, implied "return" 

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed