Javascript 未处理的拒绝（TypeError）：无法读取属性'；0'；尝试在ReactJS上使用Axios加载API数据时发生的未定义错误

正在尝试在ReactJS应用程序中加载OpenBreweryDB API，以显示美国城市中的啤酒厂列表。使用axios和async componentDidMount（）方法加载信息会导致第34行（在我的代码中）出现“未经处理的拒绝（TypeError）：无法读取未定义的属性“0”错误，这将是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;

从“/utils/API”导入API；
从“./组件/啤酒厂”进口啤酒厂；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
名称：空，
地址：空，
啤酒厂类型：空
};
}
render（）{
const{isLoading，name，address，brewery_type}=this.state；
返回(
);
}
异步组件didmount（）{
让breweryData=wait API.get（'/'）{
参数：{
结果：1，
inc:“名称、地址、啤酒厂类型”
}
});
breweryData=breweryData.data.results[0]；
常量名称=`${breweryData.name}`；
常量地址=`${breweryData.address}`；
const brewery_type=`${breweryData.brewery_type}`；
这是我的国家({
…这个州{
孤岛加载：false，
名称
地址:，
啤酒厂类型
}
});
}
}
导出默认应用程序；

它应该显示一个结果列表，显示啤酒厂名称、地址和啤酒厂类型（微型、大型等）

上述问题已修复，但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;

从“道具类型”导入道具类型；
导入“bootstrap/dist/css/bootstrap.min.css”；
导入“shards ui/dist/css/shards.min.css”；
从“碎片反应”导入{Card}；
类Brewery扩展了React.Component{
render（）{
const{name，street，city，state，posal_code，isLoading}=this.props；
常数breweryDetails=(
{name}
{街道}
{城市}
{state}
{邮政编码}
);
const loadingMessage=正在加载。。。；
返回(
{isLoading？loadingMessage:breweryDetails}
);
}
}
Brewery.propTypes={
名称：PropTypes.string，
street:PropTypes.string，
城市：PropTypes.string，
状态：PropTypes.string，
邮政编码：PropTypes.string，
isLoading:PropTypes.bool
};
出口啤酒厂；

更改

breweryData=breweryData.data.results[0]

到

breweryData=breweryData.data[0]

甚至更好

让returnedBreweryData=breweryData.data？breweryData.data[0]：{}
这可能是因为您出于某种原因没有从API获得结果。
当您使用async await时，您也需要处理错误。
在代码中添加一个try-catch块，您应该会很好，因为这是一个API调用，所以在调用
setState（）
Edited之前，您需要确保组件仍然已装入，因为您上次的回答回答回答了这个问题。我必须弄清楚为什么价值观是未定义的，但你帮助我通过了我需要的地方。谢谢
console.log（breweryData）
在
breweryData=breweryData.data[0]
之后，
console.log（breweryData）
的输出是什么？您可能会得到一个空列表，或者什么都没有，所以当您尝试使用
breweryData.data[0]
获取数据时，它是空的。您可以使用类似
const name=breweryData的东西来保护自己一点吗？brewereyData.name:“”和
常量地址=breweryData？brewereyData.address:“”
console.log（breweryData）显示显示数据的json文档，但React应用程序不显示数据。编辑原始答案以显示Breweries.js文件。您是正确的，我无法让应用程序显示任何信息，但控制台中的请求URL显示JSON数据。我真的没用过试抓块。你有一个例子吗？只要把你的函数调用放在一个try块try{//your API get call}catch（error）{//catch error here}我刚刚看到你的道具问题。您正在传递道具：姓名、地址和啤酒厂类型，但不分解这些道具，而是分解以下名称、街道、城市、州、邮政编码。你应该使用相同的名称进行解构对不起，我忘了更新原始代码，那些道具已经更新以匹配解构。但是，项仍然不可见。当您在componentDidMount中调用setState时，不要对其进行分解。state只需执行此操作。setState（{isLoading:false，name，address，brewery_type}）；