“ TypeError：无法读取未定义的属性'名称'”错误

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)] 

实际上将返回undefined ，因为

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

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

（ [][0] -> undefined ）。

---

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

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

Answer 2

有两种方法可以解决此问题。

方法1： UNSAFE_componentWillMount()

您可以使用UNSAFE_componentWillMount()而不是componentDidMount() 。 UNSAFE_componentWillMount()在呈现组件之前执行，因此您将在呈现内容之前将数据置于状态。 这应该摆脱错误。

方法2：验证状态为!Empty

在您的render方法，你可以添加一个if声明说， breweries是null如果在其他国家没有啤酒厂数据等于this.state.breweries[Math.floor(Math.random()*this.state.breweries.length)] 。

像这样：

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

要获得额外的保险，可以将两种方法结合使用。 如果这样做，您的组件将如下所示：

import React from "react";

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

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

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

export default Random;

那应该做。 希望这可以帮助。

编辑：警告

我写了willMount（），但是应该是UNSAFE_componentWillMount（）。 componentWillMount()在版本17之后将不起作用UNSAFE_componentWillMount()在版本17之后将无法工作。 我忘了写不安全的东西。

Answer 3

在尝试访问数组的索引之前，应确保已获取数据。 当数组为空时，您的随机数学计算结果为0 ，导致undefined

import React from "react";

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

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

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

    return null
  }
}

export default Random;