N
N
Nikolay Semenov2017-10-08 16:11:35
JavaScript
Nikolay Semenov, 2017-10-08 16:11:35

Am I correctly accepting the data in the rect class?

Guys, hello everyone.
I need your help.
There is such a component

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);

I have a question for you:
Did I organize it correctly and why does the function in the totalUsersInTag variable pass and consider it normal, but in totalUsersInPollination it throws an error TypeError: Cannot convert undefined or null to object.
The structure of the objects is the same, the difference is that I initialize the first object (with empty values) in redux, and the other one does not (accordingly, it is undefined at first).
Please tell me what to do in such a situation to avoid such errors

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman Alexandrovich, 2017-10-08
@nickola105

Why not write a simple check

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question