Question

我正在尝试为从API获取的数据创建随机数；但是我遇到了“第5行：'props'未定义为no-undef'”错误，并且看不到问题出在哪里。

import React from "react";

class Random extends React.Component {
  constructor() {
    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.id}</div>
    )
  }
}

export default Random;

Answer 1

您缺少constructor(props) {。 props函数首先需要将constructor作为参数接收，然后才可以使用它。您缺少那一部分。否则，您将在运行时收到Uncaught ReferenceError: props is not defined错误。

Answer 2

您必须像在构造函数中那样传递道具-

constructor(props)

Answer 3

就像其他人所说的那样，您尚未将prop传递给构造函数。您的构造函数应如下所示：

constructor(props) {
    super(props);
    this.state = {
      breweries: []
    };
  }

最终，您甚至不需要构造函数。

此外，我相信您的componentDidMount需要进行一些小的更新。您不会在json处返回then(response => response.json())数据，因此下一个then语句不会将任何内容保存到state。像这样简单地更新：

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

没有构造函数，您的更新组件应如下所示：

import React, { Component } from "react";

export default class Random extends Component {
  state = { breweries: [] }; 

  componentDidMount() {
    fetch("https://api.openbrewerydb.org/breweries")
      .then(response => {
      return 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.id}</div>
    )
  }
}

就是这样。应该很好走。

第5行：未定义“道具” no-undef

3 个答案: