“ 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;