的console.log在地圖內反應組分

Question

我有一個反應組分，我需要調試「客戶」元素「地圖」產生「customers.map（客戶=>」。

I」的值之前「」這

{ console.log (customer)} 

，但我得到的錯誤已經試過，這裏的組件：

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箭頭功能，把裏面的的console.log，在配備BL你需要使用return來返回UI元素。

像這樣：

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

作爲每MDN DOC：

箭頭功能可以有一個 「簡明體」 或通常的 「塊體 」。

在一個簡潔的主體中，只需要一個表達式，並附有一個隱含的 返回值。在塊體中，您必須使用明確的返回 聲明。

例子：

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

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