Здравствуйте. Помогите понять работу жизненного цикла react.
В коде приведен кода компонента. В момент ComponentDidMount данные фетчатся, попадают в Redux хранилище, откуда они с успехом попадают в props компонента.
В данном примере curPrice - это props получаемые от сервера. amount - props, полученные от родительского компонента.
Далее я пытаюсь "поймать" curPrice в методах жизненного цикла, но выводится так так как надо.
Далее вопросы идут по ходу кода.
class Card extends Component {
state = {
newPrice: null,
};
componentDidMount() {
const { fetchPrice } = this.props;
fetchPrice(fetchType);
}
shouldComponentUpdate(nextProps, nextState) {
console.log(this.props.curPrice); // undefined - почему???? - ведь мы curPrice передали
// в this.props при рендере
console.log(nextProps.curPrice); // {USD: 100} // а здесь они есть))
return true;
}
// Тут я обновляю страницу и смотрю что приходит, или не поможет?...
componentDidUpdate(prevProps, prevState) {
console.log(prevProps.curPrice); // undefined - почему????
}
static getDerivedStateFromProps(props, state) {
console.log(props.amount); // видна с первого рендер
console.log(props.curPrice); // видна сразу со второго render
// Поэтому чтобы записать State - приходится делать дополнительную проверку,
//которую я нигде в примерах не встречал - это правильно?..
if (props.curPrice) {
return { newPrice: props.curPrice };
} else return null;
}
render() {
const { curPrice, amount } = this.props;
return (...);
}
}
const mapStateToProps = (state, ownProps) => {
return {
curPrice: state.prices.types[ownProps.idx],
};
};
const mapDispatchToProps = {
fetchPrice,
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Card);
Средний