当项目中没有道具时,React.js给出的无法读取未定义的道具

时间:2020-08-07 20:35:43

标签: javascript reactjs api axios

我正试图从API中显示图像,但它给了我这个错误:TypeError:无法设置未定义的属性“ props”。但是我没有在代码中使用道具。我一直在努力解决这个问题,将近2个小时。

import React, { Component } from 'react'
import axios from 'axios'


class App extends Component(){

  state = {
    photo : ''
  }

  handleonClick = () => {

    axios.get('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY').then( url => {

      console.log(url.data.photos[0].img_src)
      this.setState({

        photo : url.data.photos[0].img_src

      });
    })
  }

  componentDidMount(){

    axios.get('https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY')
    .then( url => {

      console.log(url.data.photos[0].img_src)
      this.setState({

        photo : url.data.photos[0].img_src

      });
    })

  }

  render(){


   

    return(

      <div>
        <h1>Photos of Mars</h1>
        <img src={this.state.photo}/>
        <button className='new-image-btn' onClick={this.handleonClick}>New image</button>
      </div>
    )
  }
}

export default App;

2 个答案:

答案 0 :(得分:2)

这是一个错字Component()。将其更改为Component即可使用。

class App extends Component

CodeSandbox Link for your code

答案 1 :(得分:0)

如果在“类应用程序扩展组件”之后删除了()并尝试使用它,可能会更好。 您可以检查反应文档以创建基于类的组件 react Docs