他们给了我一个用 node.js 和 reactj 制作的网上商店项目，当我执行它时，它会加载网页，但随后会留下一个错误消息，这是因为在某些部分没有数据或没有代码，但我不想插入它，我的教授告诉我要设置一个条件，这样当我找不到代码时我也会上传网页，但我不知道在哪里放代码或在哪里采取行动，我是 stackoverflow 的新手，非常感谢

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