У меня есть компонент React.js, который выглядит так:
<Social email={this.state.email} />;
На странице отображаются некоторые события, обновляющие this.state.email, и, в результате, выполните рендеринг, который отправляет новый email prop в компонент Social.
В этом компоненте Social я слушаю такие обновления:
componentWillReceiveProps: function(nextProps) {
console.log('received props update', nextProps.email);
this.doSomeWork();
}
Эта консольная линия дважды отображается, что делает двойной Flash-интерфейс одновременно с вызовами в социальные сети.
Я всегда мог бы сделать что-то вроде:
if (nextProps.email != this.props.email) {
this.doSomeWork();
}
Но он чувствовал себя немного взломанным...
Ожидается ли двойное сообщение? и если да, то любопытно, почему?
Если нет, какой лучший способ как отследить, так и устранить его?
Ваш компонент Social, вероятно, отображается дважды, потому что setState вызывается дважды на родительском компоненте. Он может устанавливать свойства, отличные от email, но ваша функция рендеринга вызывается так, что компонент Social отображается дважды.
Вы можете реализовать метод shouldComponentUpdate в компоненте Social для предотвращения второго рендеринга:
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.email != this.props.email;
}