javascript - "TypeError: Cannot read property ' 名称 ' of undefined"错误

Question

代码给了我这个“TypeError:无法读取未定义的属性'名称'”错误，尽管当我console.log时它给了我对象

import React from "react";

class Random extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breweries: []
    };
  }

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => response.json())
      .then((data) => {
        this.setState({
          breweries: data,
        })
      })
  }

  render() {
    const brewery = this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)];
    return(
      <div>{brewery.name}</div>
    )
  }
}

export default Random;

Answer 1

直到异步请求完成，

this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)] 

实际上会返回未定义，因为

Math.floor(Math.random()*this.state.breweries.length)

将返回0，并且由于this.state.breweries是一个空数组，因此它将返回undefined

([][0] -> 未定义)。

<小时/>

您必须确保 brewery 尚未定义的可能性，例如:

<div>{brewery && brewery.name}</div>