TypeError: Cannot read property 'data' of null

Question

They have passed me a project of a web shop made with node.js and reactj and when I execute it loads the web but then it leaves an error message, it is because in some section there is no data or there is no code, but I do not want to insert it, my Professor told me to put a conditional so that when I do not find code I also upload the web but I do not know where to put the code or where to act, i am new on stackoverflow, thanks a lot

Cod

  60 |    let campaigns: any = [];
  61 | 
  62 |    if (this.props.categories && this.props.categories.isFinished) {
> 63 |      if (this.props.categories.queryResult.data) {
     | ^
  64 |        categories = this.props.categories.queryResult.data;
  65 |      } else if (this.props.categories.queryResult.length) {
  66 |        categories = this.props.categories.queryResult;

import * as React from "react";
import { Component } from "react";
import "./MenuBar.css";
import Menu from "./Menu";
import { List } from "semantic-ui-react";
import icon1 from "../../assets/icons/bars1.png";
import icon2 from "../../assets/icons/bars2.png";
import icon3 from "../../assets/icons/bars3.png";
import icon1r from "../../assets/icons/bars1_w.png";
import icon2r from "../../assets/icons/bars2_w.png";
import icon3r from "../../assets/icons/bars3_w.png";

import { services } from "../../store";
import { connect } from "react-redux";

import Radium from "radium";
import MenuFilters from "./MenuFilters";
export interface Props {
  // Actions
  fetchCategories: any;
  fetchShops: any;
  fetchCampaigns: any;

  // Props
  name: string;
  avatar: string;
  userId: string;
  classes: any;

  categories: any;
  shops: any;
  campaigns: any;

  // Events
  onChangeGrid: any;
}

interface State {
  isOpen: boolean;
  grid: string;
}
class _MenuBar extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      isOpen: true,
      grid: "grid1"
    };
  }

  public componentDidMount() {
    this.props.fetchCategories();
    this.props.fetchShops();
    this.props.fetchCampaigns();
  }

  public render() {
    let categories: any = [];
    let shops: any = [];
    let campaigns: any = [];

    if (this.props.categories && this.props.categories.isFinished) {
      if (this.props.categories.queryResult.data) {
        categories = this.props.categories.queryResult.data;
      } else if (this.props.categories.queryResult.length) {
        categories = this.props.categories.queryResult;
      }
    }

    if (this.props.shops && this.props.shops.isFinished) {
      if (this.props.shops.queryResult.data) {
        shops = this.props.shops.queryResult.data;
      } else if (this.props.shops.queryResult.length) {
        shops = this.props.shops.queryResult;
      }
    }

    if (this.props.campaigns && this.props.campaigns.isFinished) {
      if (this.props.campaigns.queryResult.data) {
        campaigns = this.props.campaigns.queryResult.data;
      } else if (this.props.campaigns.queryResult.length) {
        campaigns = this.props.campaigns.queryResult;
      }
    }

    return (
      <div className="MCMenuBar">
        <div className="MCMenuBarContainer">
          <div
            style={{
              display: "inline-flex",
              width: "50%"
            }}
          >
            <Menu categories={categories} shops={shops} campaigns={campaigns} />
            <div className="MCMenuBarDivider" />
            <div
              style={{
                height: "50px",
                marginTop: "10px"
              }}
            >
              <List horizontal>
                <List.Item as="a">
                  <span style={{ color: "#000", fontWeight: "bold" }}>
                    NUEVOS
                  </span>
                </List.Item>
                <List.Item as="a">
                  <span style={{ color: "#000", fontWeight: "bold" }}>
                    GRATIS
                  </span>
                </List.Item>
                <List.Item as="a">
                  <span style={{ color: "#000", fontWeight: "bold" }}>
                    PROMOS
                  </span>
                </List.Item>
                <List.Item as="a">
                  <span style={{ color: "#000", fontWeight: "bold" }}>
                    JUEGOS
                  </span>
                </List.Item>
              </List>
            </div>
          </div>
          <div
            style={{
              height: "38px",
              width: "50%",
              textAlign: "right"
            }}
          >
            <List horizontal>
              <List.Item
                as="a"
                onClick={() => {
                  if (this.props.onChangeGrid) {
                    this.setState({ grid: "grid1" });
                    this.props.onChangeGrid("grid1");
                  }
                }}
              >
                <span style={{ color: "#000", fontWeight: "bold" }}>
                  <img
                    src={this.state.grid === "grid1" ? icon1 : icon1r}
                    alt="Mi chollo"
                    style={style.baricon}
                  />
                </span>
              </List.Item>
              <List.Item
                as="a"
                onClick={() => {
                  if (this.props.onChangeGrid) {
                    this.setState({ grid: "grid2" });
                    this.props.onChangeGrid("grid2");
                  }
                }}
              >
                <span style={{ color: "#000", fontWeight: "bold" }}>
                  <img
                    src={this.state.grid === "grid2" ? icon2 : icon2r}
                    alt="Mi chollo"
                    style={style.baricon}
                  />
                </span>
              </List.Item>

              <List.Item
                as="a"
                onClick={() => {
                  if (this.props.onChangeGrid) {
                    this.setState({ grid: "grid3" });
                    this.props.onChangeGrid("grid3");
                  }
                }}
              >
                <span style={{ color: "#000", fontWeight: "bold" }}>
                  <img
                    src={this.state.grid === "grid3" ? icon3 : icon3r}
                    alt="Mi chollo"
                    style={style.baricon}
                  />
                </span>
              </List.Item>
              <List.Item>
                <div />
              </List.Item>
            </List>
            <div
              style={{
                display: "inline-flex",
                borderLeft: "1px solid #ededed",
                paddingLeft: "10px",
                height: "58px",
                marginTop: "-12px",
                position: "relative",
                top: "2px"
              }}
            >
              <div
                style={{
                  display: "inline-flex",
                  paddingTop: "10px"
                }}
              >
                <MenuFilters />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const style = {
  baricon: {
    width: "24px",
    height: "24px",
    opacity: 0.4
  }
};

const mapDispatchToProps = (dispatch: any) => {
  return {
    // same effect
    fetchCategories: () => {
      dispatch(services["api/v1/categories"].find());
    },
    fetchShops: () => {
      dispatch(services["api/v1/shops"].find());
    },
    fetchCampaigns: () => {
      dispatch(services["api/v1/campaigns"].find());
    }
  };
};

const mapStateToProps = (store: any) => {
  return {
    categories: store.categories,
    shops: store.shops,
    campaigns: store.campaigns
  };
};

const MenuBar = connect(
  mapStateToProps,
  mapDispatchToProps
)(_MenuBar);

export default Radium(MenuBar);

It maybe that this.props is null, or this.props.categories is null, please post your data so we can validate it. — Andrejs Gubars
– Andrejs Gubars, Commented Jan 29, 2019 at 9:31

ztadic91 · Accepted Answer · 2019-01-29 09:49:09Z

1

As the error explains your queryResult property is null. Add another conditional check to see if the queryResult field is not empty in the line above (62)

if (
      this.props.categories &&
      this.props.categories.isFinished &&
     !!this.props.categores.queryResult
) {
// user queryResult
}

Another option would be to set a default value for queryResult and update all it's references.

const qResult = this.props.categories.queryResult || [];

edited Jan 29, 2019 at 9:49

answered Jan 29, 2019 at 9:32

ztadic91

2,8041 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jesus91 Over a year ago

when reloading the web redirects me to another type of error in another file called todo.tsx 100 | ) { 101 | return <div>No hay datos</div>; 102 | } > 103 | let listChollos = this.props.items.queryResult.data.map( | ^ 104 | (chollo: any, key: any) => { 105 | if (this.props.grid === "grid1") { 106 | return <Chollo1 data={chollo} />;

ztadic91 Over a year ago

it's obviously the same logic and error you get errors, because the same field is null

Jesus91 Over a year ago

thank you very much, I changed the reference that gave me empty for another return with a div

ztadic91 Over a year ago

glad I could help

Darshan Malani · Accepted Answer · 2020-12-30 09:06:25Z

0

if (response && response.data && response.data.length > 0) {

}

answered Dec 30, 2020 at 9:06

Darshan Malani

4763 silver badges12 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'data' of null

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related