Понимание жизненного цикла React вкупе с получением данных от сервера?

Question

[anxieter]

Здравствуйте. Помогите понять работу жизненного цикла 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);

Answer 1

[Антон Спирин]

В данном примере curPrice - это props получаемые от сервера

Метод жизненного цикла componentDidMount вызывается после render.
Ничего удивительного в том, что при первой отрисовке вместо данных вы получаете undefined нет. К этому моменту еще даже не инициирован ваш запрос на сервер.

Поэтому чтобы записать State - приходится делать дополнительную проверку,
которую я нигде в примерах не встречал - это правильно?..

Тут не ясно для чего вам вообще использовать состояние. Если вы никак не изменяете это значение в своем компоненте, то используйте его напрямую из props.

Comments

[anxieter]

Антон. Благодарю за отклик.
Вроде бы теперь разобрался - если данные тянуть из родительского компонента, и рендерить компонент по их получению - все будет работать более внятно. Без дополнительных проверок.
shouldComponentUpdate как я понял тоже получает undefined так как смотрит в первый рендер

[Антон Спирин]

anxieter, ну существуют разные подходы, которые обычно используют исходя из задач. Например, флаг состояния загрузки:

render() {
  const { isFetching, data } = this.props;

  if (isFetching) return <Preloader />;  

  return <SomeDataComponent data={data} />;
}

По поводу souldCompnentUpdate, то этот метод жизненного цикла вызывается перед обновлением и получает предыдущие значения props и state. Вы их можете сравнить с текущими и при необходимости либо выполнить обновление компонента, либо предотвратить. У вас при первой отрисовке значение curPrice было undefined, его вы в prevProps и получаете.