反应组件中的地图内的console.log

Question

我有一个反应组件，我需要调试'map'产生“customers.map(customer =>”的'customer'元素的值。

我之前试过“”这个

{ 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放入其中，块体需要使用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