1.ライフサイクルの順序

constructor

render

componentDidMount

(キャプチャ完了)

(setState)

render

コンポーネントDidUpdate(5番目のコンポーネントにステータスが設定されているため、コンポーネントの更新が行われる)

.

componentWillUnmount

2.ライフサイクルの重要性

componentDidMountを使用してmockデータをロード中にエラーが発生しました.
代表的なライフサイクルの問題

class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productInfoList: [],
    };
  }

  componentDidMount() {
    fetch('/data/productData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({
          productInfoList: data.results,
        });
      });
  }
  render() {
    const { productInfoList } = this.state;
    return (
      <>
        <div className="productDetail">
          <div className="nav">임시</div>
          <div className="list">
            <span className="home">홈</span>
            <span className="category">
              {productInfoList.section[0]}
            </span>

順序を表示するには、まずコンストラクション関数を実行し、renderを実行します.
ただし、ProductInfoListはsetStateが実行される前の空の配列です.
空の配列にsection[0]というキー値が見つからないため、エラーが発生しました.
ただし、{ProductInfoList}のみを使用している場合は、最初は未定義のエラーメッセージが発生し、エラーメッセージが発生しない可能性があります.

3. 🌈 解析(条件付きレンダリング)

条件付きレンダリングが使用されます.

class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productInfoList: [],
    };
  }

  componentDidMount() {
    fetch('/data/productData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({
          productInfoList: data.results,
        });
      });
  }
  render() {
    const { productInfoList } = this.state;
    return (
<img src={productInfoList.images && productInfoList.images[0].image_url}className="miniPhoto">

<img src={productInfoList.images && productInfoList.images[0].image_url}className="miniPhoto">productInfoList.imagesがtrueの場合、productInfoList.images[0].イメージurlをレンダリングします.そういう意味です.
&&演算子を使うときの注意点!

変数が数値タイプの場合、0はfalseです.

変数が文字列タイプである場合、空の文字列“”もfalseである.

参考資料
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/