Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
19 Апр 2023
2 мин
1086

Обновление дочернего компонента в React при изменении свойства

В работе с ReactJS часто встречается ситуация, когда дочерний компонент не обновляется, несмотря на изменение входящего свойства (prop). Это может вызвать

В работе с 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 для корректного отслеживания изменений и перерисовки компонентов.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей

Добавить комментарий