React JS：为什么我在 componentdidMount() 中出错？

Question

以下是我的父组件：

const movies = [896, 895]

    const cards = movies.map(movie =>{
        <FlipCard number = {'movie'} />
    })

在子组件中，我试图访问 props.number，但出现错误。 子组件代码：

state = {
        poster: 'http://image.tmdb.org/t/p/w500',
    }

     componentDidMount(){
        axios.get('https://api.themoviedb.org/3/movie/' + {this.props.number} + '?api_key=*******&language=en-US')
            .then(
                    res=>{
                        this.setState({poster: this.state.poster + res.data.poster_path})   
                        console.log(this.props);             
                        }
                )   
        } 

在浏览器中，我收到此错误：在此处输入图像描述[this.props.number 上的意外关键字“this”]

在 VS Code 中，我收到此错误enter image description here [':' expected at that axios line]

我该如何解决这个问题？

编辑：我确实删除了花括号。 现在 componentdidMount() 根本没有触发。 甚至没有显示 console.logs。 为什么？ 请帮忙。！

Answer 1

尝试通过以下方式修复代码：在您的父组件中：

const movies = [896, 895]

const cards = movies.map(movie => {
   <FlipCard number = 'movie' />
})

在您的子组件中

state = {
  poster: 'http://image.tmdb.org/t/p/w500',
}

componentDidMount() {
   axios.get(`https://api.themoviedb.org/3/movie/${this.props.number}api_key=*******&language=en-US`
.then(res=>{
    this.setState({poster: this.state.poster + res.data.poster_path})   
    console.log(this.props);             
})}  

Answer 2

您可以解决此问题并使用箭头函数和异步等待方法编写更好的代码

state = {
  poster: 'http://image.tmdb.org/t/p/w500',
}

componentDidMount() {
  getPoster()
} 

const getPoster = async () => {
  try {
    const response = await axios.get(`https://api.themoviedb.org/3/movie/${this.props.number}api_key=*******&language=en-US`)
    this.setState({poster: this.state.poster + response.data.poster_path})   
    console.log(this.props);             
  } catch(err) {
    console.log(err)
  }
}