Почему два раза вызывается console.log?

Question

[WarriorKodeK]

Доброе утро. Есть у меня екшн на получение информации с бека.

Action

import ProductsService from "../../config/productService";
import {
  FETCHING_PRODUCT_DETAIL,
  FETCHED_PRODUCT_DETAIL
} from "../../config/constants";

const fetchingProductDetail = payload => {
  return {
    type: FETCHING_PRODUCT_DETAIL,
    payload
  };
};

const fetchedProductDetail = payload => {
  return {
    type: FETCHED_PRODUCT_DETAIL,
    payload
  };
};

export const getProductDetail = id => dispatch => {
  dispatch(fetchingProductDetail(id));

  ProductsService.getProductById(id).then(data =>
    dispatch(fetchedProductDetail(data))
  );
};

Для него создан редюсер. В редюсере когда только начинается загрузка данных в стейт я добавляю loading: true и когда данные загрузились loading: false.

Reducer

import {
  FETCHING_PRODUCT_DETAIL,
  FETCHED_PRODUCT_DETAIL
} from "../../config/constants";

const initialState = {
  loading: false,
  productDetail: {},
  productDetailData: [],
  error: null
};

export const productDetail = (state = initialState, action) => {
  switch (action.type) {
    case FETCHING_PRODUCT_DETAIL:
      return {
        ...state,
        loading: true
      };
    case FETCHED_PRODUCT_DETAIL:
      return {
        ...state,
        loading: false,
        productDetail: action.payload.product,
        productDetailData: action.payload.data
      };
    default:
      return state;
  }
};

И в компоненте, когда данные загрузились (loading: false) я вызываю console.log("DATA LOADED"). Но почему-то он вызывается 2 раза, и при первом вызове у меня данные еще не пришли (пустой массив), а второй раз все данные пришли.

Component

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import ProductService from "../../config/productService";
import { getProductDetail } from "../../actions/productDetail/productDetail";

import { Button, Row, Col, Container } from "reactstrap";

import ModalComponent from "../../components/common/Modal/Modal";
import TableComponent from "../../components/Table/TableComponent";
import ProductDetail from "../../components/ProductDetail/ProductDetail";

class ProductDetailContainer extends Component {
  state = {
    showModal: false
    // tableData: [{name: 'Americano', maxPrice: 11, minPrice: 12, averagePrice: 111, soldOut: 10.000}]
  };

  toggleModal = () => {
    this.setState({
      showModal: !this.state.showModal
    });
  };

  componentDidMount() {
    const {
      match: {
        params: { id }
      },
      getProductDetail
    } = this.props;
    getProductDetail(id);
  }

  createTableData = arr => {
    return arr.map((element, index) => {
      return {
        name: element.banner.name,
        maxPrice: ProductService.maxPrice(element.pricingDataByWeek),
        minPrice: ProductService.minPrice(element.pricingDataByWeek),
        averagePrice: ProductService.averagePrice(element.pricingDataByWeek),
        soldOut: "10.000"
      };
    });
  };

  render() {
    const { productDetail, productDetailData, loading } = this.props;
    const { showModal, data } = this.state;
    return (
      <Container>
        <ProductDetail data={productDetail} />
        <Row>
          <Col sm={{ offset: 9 }}>
            <Button color="primary" onClick={this.toggleModal}>
              Hello
            </Button>
          </Col>
          <Col>
            <Button color="primary">Create Report</Button>
          </Col>
          <ModalComponent showModal={showModal} toggle={this.toggleModal} />
        </Row>
        {loading
          ? console.log(`DATA NOT LOADED ${JSON.stringify(productDetailData)}`)
          : console.log(`DATA LOADED ${JSON.stringify(productDetailData)}`)};
      </Container>
    );
  }
}

const mapStateToProps = state => {
  return {
    ...state.productDetail
  };
};

const mapDispatchToProps = {
  getProductDetail
};

ProductDetailContainer.propTypes = {
  productDetail: PropTypes.object.isRequired,
  getProductDetail: PropTypes.func.isRequired,
  productDetailData: PropTypes.array.isRequired
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductDetailContainer);

Вопрос - Как мне можна пропустить этот первый лоадинг с пустым массивом и почему он рендерится?

Answer 1

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

Метод componentDidMount вызывается после render. Видимо, при первом вызове render у вас свойство productDetail.loading стоит в положении false.
Если собираетесь рендерить список, то ничего страшного в этом нет, так как с пустым массивом ошибки [].map не будет, а после render сразу начнется загрузка.
В других случаях надо делать дополнительные проверки.