未处理的拒绝（TypeError）：尝试在 ReactJS 上使用 Axios 加载 API 数据时，无法读取未定义的属性“0”

Question

尝试在 ReactJS 应用程序中加载 Open BreweryDB API 以显示美国城市的啤酒厂列表。 使用 axios 和异步 componentDidMount() 方法加载信息会导致第 34 行（在我的代码中）出现“未处理的拒绝（TypeError）：无法读取未定义的属性 '0'”错误，这将是 breweryData = breweryData.data.results [0];

我对 ReactJS 和 API 实现很陌生。 我尝试删除 ...result[0]; 部分，但我仍然遇到与上述相同的错误，并且在同一行出现问题。 不知道如何解决这个问题。 如果我忽略错误，我可以在卡上呈现“正在加载...”元素。 下面是我在 App.js 文件夹中使用的代码

import API from './utils/API';
import Brewery from './component/Breweries';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      name: null,
      address: null,
      brewery_type: null
    };
  }

  render() {
    const { isLoading, name, address, brewery_type } = this.state;

    return (
      <Brewery isLoading={isLoading} name={name} address={address} brewery_type={brewery_type} />
    );
  }

  async componentDidMount() {
    let breweryData = await API.get('/', {
      params: {
        results: 1,
        inc: 'name,address,brewery_type'
      }
    });

    breweryData = breweryData.data.results[0];

    const name = `${breweryData.name}`;
    const address = `${breweryData.address}`;
    const brewery_type = `${breweryData.brewery_type}`;

    this.setState({
      ...this.state, ...{
        isLoading: false,
        name,
        address,
        brewery_type
      }
    });
  }
}

export default App;

它应该显示一个结果列表，其中显示啤酒厂的名称、地址和啤酒厂类型（微型、主要等）。

以上问题已修复，但未显示 API 数据。 这是 breweries.js 文件中的代码

import PropTypes from 'prop-types';

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

import { Card } from 'shards-react';

class Brewery extends React.Component {
    render() {
        const { name, street, city, state, postal_code, isLoading } = this.props;

        const breweryDetails = (
            <div>
                <h4 className="mb-0">{name}</h4>
                <span className="text-muted">{street}</span>
                <span className="text-muted">{city}</span>
                <span className="text-muted">{state}</span>
                <span className="text-muted">{postal_code}</span>
            </div>
        );

        const loadingMessage = <span className="d-flex m-auto">Loading...</span>;

        return (
            <Card
                className="mx-auto mt-4 text-center p-5"
                style={{ maxWidth: "300px", minHeight: "250px" }}
            >
                {isLoading ? loadingMessage : breweryDetails}
            </Card>
        );
    }
}

Brewery.propTypes = {
    name: PropTypes.string,
    street: PropTypes.string,
    city: PropTypes.string,
    state: PropTypes.string,
    postal_code: PropTypes.string,
    isLoading: PropTypes.bool
};

export default Brewery;

Answer 1

改变

breweryData = breweryData.data.results[0];

到

breweryData = breweryData.data[0]

甚至更好

let returnedBreweryData = breweryData.data ? breweryData.data[0] : {}

Answer 2

这可能是因为您出于某种原因没有从 API 获得结果。 当您使用 async await 时，您也需要处理错误。 在您的代码中添加一个 try catch 块，您应该没问题