Question

他们通过了一个由node.js和reactj组成的网上商店的项目，并在我执行该项目时加载了Web，但随后却留下了错误消息，这是因为在某些区域中没有数据或没有数据代码，但是我不想插入它，我的教授告诉我要设置一个条件，这样当我找不到代码时，我也会上传网络，但是我不知道在哪里放置代码或在哪里行动，我是新手关于stackoverflow，非常感谢

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

Answer 1

由于错误原因，您的queryResult属性为空。添加另一个条件检查，以查看上方（62）行中的 queryResult 字段是否不为空

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

另一种选择是为 queryResult 设置默认值并更新其所有引用。

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

Answer 2

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

}

TypeError：无法读取null的属性“数据”

2 个答案: