React.js - componentWillReceiveProps bị trúng hai lần

Question

Tôi có một thành phần React.js đó được trả lại như vậy:

<Social email={this.state.email} />; 

Có một số sự kiện trên trang đó cập nhật this.state.email, và kết quả là, đi qua làm , gửi một email mới cho thành phần Social.

Trong thành phần Social này, tôi nghe các bản cập nhật như sau:

componentWillReceiveProps: function(nextProps) { 
    console.log('received props update', nextProps.email); 
    this.doSomeWork(); 
    } 

Đó là dòng console đang được trả lại gấp đôi mà làm cho đèn flash UI hai lần cùng với các cuộc gọi đến các mạng xã hội.

tôi luôn luôn có thể làm điều gì đó như:

if (nextProps.email != this.props.email) { 
     this.doSomeWork(); 
    } 

Nhưng nó cảm thấy một chút hacky ...

là thông điệp đôi mong đợi? và nếu có, hãy tò mò tại sao?

Nếu không, cách tốt nhất để theo dõi và loại bỏ nó là gì?

Answer 1

Thành phần Social của bạn có thể đang được hiển thị hai lần vì setState được gọi hai lần trên thành phần chính. Nó có thể được thiết lập các thuộc tính khác với email nhưng hàm render của bạn được gọi để thành phần Social hiển thị hai lần.

Bạn có thể thực hiện phương pháp shouldComponentUpdate trong thành phần Social để ngăn chặn vẽ thứ hai:

shouldComponentUpdate: function(nextProps, nextState) { 
    return nextProps.email != this.props.email; 
}