我正试图从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;