Необработанный отказ (TypeError): невозможно прочитать свойство '0' неопределенного события при попытке загрузить данные API с помощью Axios в ReactJS

Question

Попытка загрузить API Open BreweryDB в приложение ReactJS для отображения списка пивоваренных заводов в городе США.Загрузка информации с помощью axios и метода async componentDidMount () приводит к ошибке «Необработанное отклонение (TypeError): невозможно прочитать свойство« 0 »неопределенного» в строке 34 (в моем коде), которая будет иметь вид breweryData = breweryData.data.results.[0];

Я довольно новичок в реализации ReactJS и API.Я попытался удалить ... результаты [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

Возможно, потому что вы по какой-то причине не получаете результат от API. Когда вы используете async await, вы также захотите обработать ошибку. Добавьте блок try catch в ваш код, и все будет в порядке

Answer 2

Изменить

breweryData = breweryData.data.results[0];

на

breweryData = breweryData.data[0]

или даже лучше

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