В работе с ReactJS часто встречается ситуация, когда дочерний компонент не обновляется, несмотря на изменение входящего свойства (prop). Это может вызвать некоторое недоумение, поскольку, как известно, компоненты в React обычно перерисовываются при изменении их state или props.
Рассмотрим пример:
class Container extends React.Component {
handleEvent = () => {
this.props.foo.bar = 123;
}
render() {
return <Child bar={this.props.foo.bar} />
}
}
class Child extends React.Component {
render() {
return <div>{this.props.bar}</div>
}
}
В данном случае, несмотря на то, что значение foo.bar изменяется в родительском компоненте Container, дочерний компонент Child не обновляется и продолжает отображать старое значение.
Причина этого заключается в том, как React следит за изменениями в state и props. Когда свойство объекта меняется напрямую, как в примере выше (this.props.foo.bar = 123), React не может «увидеть» это изменение, поскольку оно происходит внутри самого объекта, а не на уровне ссылки на объект. В результате, React не знает, что нужно перерисовать компонент.
Вместо прямого изменения свойств объекта, рекомендуется создавать новый объект с измененными данными и передавать его через props. Это гарантирует, что React сможет отследить изменения и корректно перерисовать компоненты.
Исправленный пример может выглядеть следующим образом:
class Container extends React.Component {
handleEvent = () => {
const newFoo = {…this.props.foo, bar: 123};
this.props.onFooChange(newFoo);
}
render() {
return <Child bar={this.props.foo.bar} />
}
}
class Child extends React.Component {
render() {
return <div>{this.props.bar}</div>
}
}
Таким образом, когда возникает необходимость изменить входящие свойства компонента, следует помнить о необходимости создания нового объекта и передачи его через props для корректного отслеживания изменений и перерисовки компонентов.
Добавить комментарий