Reactjs-我不断收到错误：TypeError：company.map 不是函数

Question

我正在尝试使用 nodejs 和 reactjs 将 mysql 数据显示到表中。 出于某种原因，我保留了以下错误：

TypeError：company.map 不是函数

我从昨天开始就一直试图找出问题所在，但没有运气。 我什至向 useState 传递了一个空数组，但这不起作用。

如果有人可以帮助我找出我的代码存在的问题，那就太好了。

我的代码如下：

import { useEffect, useState } from "react";
import { Button, Container, Row, Table } from "react-bootstrap";
import axios from "axios";

const AllCompanies = () => {
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    getAllCompanies();
  }, []);

  const getAllCompanies = async () => {
    const response = await axios.get("http://localhost:8000/companymst");
    console.log(response.data);
    setCompanies(response.data);
  };

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <Container>
            <Row>
              <Table striped bordered hover size="sm">
                <thead>
                  <tr>
                    <th>CompanyCode</th>
                    <th>CompanyName</th>
                    <th>Address1</th>
                    <th>Address2</th>
                    <th>PoBox</th>
                    <th>City</th>
                    <th>Province</th>
                    <th>Country</th>
                    <th>Phone</th>
                    <th>Fax</th>
                    <th>Email</th>
                    <th>RegistrationNo</th>
                    <th>VatNo</th>
                    <th>PinNo</th>
                    <th>BranchNo</th>
                    <th>BranchHq</th>
                    <th>StartDate</th>
                    <th>EndDate</th>
                    <th>Current</th>
                    <th>RunDate</th>
                    <th>DateCreated</th>
                    <th>UserID</th>
                    <th>LocationID</th>
                    <th colSpan="2">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {companies.map((company) => {
                    return (
                      <tr>
                        <td>{company.CompanyCode}</td>
                        <td>{company.CompanyName}</td>
                        <td>{company.Address1}</td>
                        <td>{company.Address2}</td>
                        <td>{company.PoBox}</td>
                        <td>{company.City}</td>
                        <td>{company.Province}</td>
                        <td>{company.Province}</td>
                        <td>{company.Country}</td>
                        <td>{company.Phone}</td>
                        <td>{company.Fax}</td>
                        <td>{company.Email}</td>
                        <td>{company.RegistrationNo}</td>
                        <td>{company.VatNo}</td>
                        <td>{company.PinNo}</td>
                        <td>{company.BranchNo}</td>
                        <td>{company.BranchHq}</td>
                        <td>{company.StartDate}</td>
                        <td>{company.EndDate}</td>
                        <td>{company.Current}</td>
                        <td>{company.RunDate}</td>
                        <td>{company.DateCreated}</td>
                        <td>{company.UserID}</td>
                        <td>{company.LocationID}</td>
                        <td>
                          <Button variant="info">Edit</Button>
                        </td>
                        <td>
                          <Button variant="danger">Delete</Button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Row>
          </Container>
        </div>
      </div>
    </div>
  );
};

export default AllCompanies;

Answer 1

正如@captain-yossarian 所说，可能是你得到了反对，为了避免这个问题，你可以像下面那样做。

{companies?.length > 0 && companies.map((company) => {
   return '';
})}