反应组件中的map中的console.log

Question

我有一个react组件,我需要调试'customer'元素的值'map'生成"customers.map(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

使用{}带箭头功能的块体并将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