获取数据时出现无法读取未定义属性（读取“地图”）错误

Question

我有

companies.json

，我正在尝试从中获取数据，然后将公司名称显示为复选框，所以这是我的父组件：

import React, { useEffect, useState } from "react";
import SimpleBox from "../components/sub-components/SimpleBox";
import BoxWithSearch from "../components/sub-components/BoxWithSearch";
import { useDispatch, useSelector } from "react-redux";
import { listProducts } from "../actions/productActions";
import { listCompanies } from "../actions/companyActions";

export default function HomeScreen() {
  const dispatch = useDispatch();

  const companyList = useSelector((state) => state.companyList);
  const {  companies } = companyList;


  useEffect(() => {
    dispatch(listCompanies());
  }, [dispatch]);
  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-3 col-md-12 col-sm-12 col-xs-12">
          <h3 className="title">Brands</h3>
          {companies.map((company) => (
            <BoxWithSearch type={"companies"} company={company} />
          ))}
        </div>
        
      </div>
    </div>
  );
}

BoxWithSearch 组件之后：

import React from "react";
import CheckBox from "../custom-components/CheckBox";

export default function BoxWithSearch(props) {
  return (
    <div className="search-w-box card">
      <div className="card-header">
        <input type="text" className="form-control" placeholder={`Search ${props.type}`} aria-label="Recipient's username"></input>
      </div>
      <div className="card-body">
          <CheckBox text={props.name} />
      </div>
    </div>
  );
}

这里转到复选框：

import React from "react";

export default function CheckBox(props) {
  const [isChecked, setChecked] = React.useState(false);

  const toggleCheck = (e) => {
    setChecked(e.target.checked || !isChecked);
  };
  return (
    <>
      <label className="checkbox-container">
        {props.text}
        <input
          type="checkbox"
          checked={isChecked}
          onChange={(e) => toggleCheck(e)}
          id={props.id}
        />
        <span className="checkmark"></span>
      </label>
    </>
  );
}

但不幸的是，我得到：

Uncaught TypeError: Cannot read properties of undefined (reading 'map') error and I have no idea why and it is getting me crazy.

您能看一下吗？我的 JSON 数组是这样的：

[
  {
    "slug": "Dickens-Franecki",
    "name": "Dickens - Franecki",
    "address": "12158 Randall Port",
    "city": "East Maureenbury",
    "state": "NE",
    "zip": "74529",
    "account": 31010023,
    "contact": "Lonzo Stracke"
  },
  {
    "slug": "Weissnat-Schowalter-and-Koelpin",
    "name": "Weissnat, Schowalter and Koelpin",
    "address": "92027 Murphy Cove",
    "city": "Port Malachi",
    "state": "WY",
    "zip": "56670-0684",
    "account": 81813543,
    "contact": "Kathryne Ernser"
  },
]

Answer 1

您可以使用可选链接（？.）来检查数组中是否有数据。

在这里您可以检查

what is optional-chaining?

和

how it works

。 可选链

{companies?.map((company) => (
  <BoxWithSearch 
    key={company.slug}
    type={"companies"} 
    company={company}
  />
))}

Answer 2

首先，检查数组（公司）的值。没有记录，所以显示错误， 其次，如果数据获取成功，然后显示此未定义错误， 你必须做：

{companies && companies.map((company) => (
        <BoxWithSearch type={"companies"} company={company} />
      ))}

这样做只是意味着公司中有可用数据，然后添加map()