Изучаю реакт. В одном скринкасте советуют отлавливать изменения пропсов в хуке componentWillReceiveProps, однако он теперь депрекейтед и рекомендуют использовать статический метод getDerivedStateFromProps, который должен менять стейт.
Однако, метод вызывается, условие срабатывает, но стейт не меняется.
static getDerivedStateFromProps(props, state) {
if (props.isOpened !== state.isOpened) {
return {
isOpened: props.isOpened
};
}
return null;
}
Что делаю не так?
UPD. Полный класс компонента
import React, { Component } from 'react';
import './style.sass';
class Article extends Component {
constructor(props) {
super(props);
this.state = {
isOpened: props.isOpened,
};
this.article = props.article;
}
// componentWillReceiveProps(nextProps) {
// console.log(nextProps.isOpened, this.props.isOpened);
//
// if (nextProps.isOpened !== this.props.isOpened) {
// this.setState({
// isOpened: nextProps.isOpened
// });
// }
// }
static getDerivedStateFromProps(props, state) {
if (props.isOpened !== state.isOpened) {
console.log('getDerivedStateFromProps', props.isOpened, state);
return {
isOpened: props.isOpened
};
}
return null;
}
handleClick = () => {
this.setState({
isOpened: ! this.state.isOpened,
});
};
getDescription = () => {
return (
<p>{ this.props.article.description }</p>
)
};
render() {
return (
<div className='card article'>
<div className='card-header'>
<h6>{ this.props.article.title }</h6>
<button onClick={this.handleClick}
className='btn btn-primary btn-sm float-right'>
{ this.state.isOpened ? 'Закрыть' : 'Открыть' }
</button>
</div>
<div className='card-body'>
{ this.state.isOpened ? this.getDescription() : '' }
</div>
</div>
);
}
}
export default Article;
UPD.
Ссылка на песочницу. Нужно, чтобы при реверсе списка статей, описание первой статьи всегда было открыто.
Средний
