Question

我有一个反应组件，我需要调试＆＃39;客户＆＃39; ＆＃39; map＆＃39;生产＆＃34; customers.map（customer =＆gt;＆＃34;。

我之前已经尝试过＆＃34;＆＃34;此

{ 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 ：

箭头功能可以有一个简洁的身体＆＃34;或通常的＆＃34;块   体＆＃34;

在一个简洁的正文中，只需要一个表达式，一个隐含的表达式   返回附上。在块体中，您必须使用显式返回   言。

示例：

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

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

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

1 个答案: