未處理的拒絕（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 塊，您應該沒問題