Правильно ли принимаю данные в классе rect?

Question

[Николай Семенов]

Ребятушки, всем привет.
Нужна ваша помощь.
Есть вот такой компонент

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Helper from './Helper';
import ProgressBar from './ProgressBar';
/**
 * class declaration
 */
class DashAnalytics extends Component {
   /**
   * Renders "DashAnalytics component"
   * @return {string} - HTML markup for the component
   */
  render() {
  const tags = this.props.venues.tagPollination;
  const pollination = this.props.venues.pollination;
  const totalUsersInTag = (() => {
    let totalUsers = 0;
    Object.keys(tags).forEach((key) => {
      totalUsers += tags[key].totalUsers;
    });
    return totalUsers;
  })();
  const totalUsersInPollination = (() => {
    let totalUsers = 0;
    Object.keys(pollination).forEach((key) => {
      totalUsers += pollination[key].totalUsers;
    })
    return totalUsers;
  })();
  Object.keys(tags).forEach((key) => {
    tags[key].barValue = Math.round((tags[key].totalUsers / totalUsersInTag) * 100);
    tags[key].barName = tags[key].tagName;
  })
  return (
    <div className="analytics">
      <div className="analitics__lside">
        <div className="analitics__header"> 
          <div className="analitics__heading">Top 5 Biggest Pollination Venue</div>
          <div className="analitics__help">
            <Helper />
          </div>
        </div>
        <div className="analitics__body">
          <ProgressBar colorFill='#1b75a2' collorBar='#3399cc'/>
      </div>
      </div>
      <div className="analitics__rside">
      <div className="analitics__header"> 
          <div className="analitics__heading">Top 5 Pollination Custom Tags</div>
          <div className="analitics__help">
            <Helper />
          </div>
      </div>
      <div className="analitics__body">
        <ProgressBar analyticData={tags} />
      </div>
      </div>
    </div>
  );
  }
}

function mapStateProps({venues}) {
  return {venues};
}

export default connect(mapStateProps)(DashAnalytics);

У меня вопрос к вам:
Правильно ли я его организовал и почему функция в переменной totalUsersInTag проходит и считает норм, а в totalUsersInPollination выкидывает ошибку TypeError: Cannot convert undefined or null to object.
Структура объектов одинаковая, разница в том что первый объект я иницилизирую(с пустыми значениями) в redux, а другой нет(соответственно он сначала undefined).
Скажите пожалуйста, что нужно делать в такой ситуация, чтобы избежать подобных ошибок

Answer 1

[Роман Александрович]

Почему бы не написать простую проверку

const totalUsersInPollination = (() => {
    let totalUsers = 0;
if (pollination!==undefined && pollination!==null){
    Object.keys(pollination).forEach((key) => {
      totalUsers += pollination[key].totalUsers;
    })
}
    return totalUsers;
  })();

Comments

[Николай Семенов]

согласен, но подумал в друг в реакте есть что-то свое для подобных ситуаций

[Роман Александрович]

Николай Семенов, как вариант из реакта вы можете указать default props

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)