想知道如何在我的api url js做出反应时添加一个随机数

问题描述 投票:0回答:1

正如标题所说我有一个按钮,我希望每次按下按钮时都会得到不同的电影。我在想我必须将网址更改为:https://api.themoviedb.org/3/movie/${movieID}?api_key=${apikey}

我已经制作了随机id函数,但它会带来意外令牌的错误,所以我可能会把它放在错误的地方或者我真的很新的事情,所以这可能是一个非常简单的错误。

这是整个app.js:

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      title: '',
      overview: '',
      poster: '',
      vote: ''
    }
    this.getFilm=this.getFilm.bind(this);
  }

 movieID: function (props){
  var maxNumber = 284054;
  var randomNumber = Math.floor((math.random()* maxNumber )+1);

}

getFilm(){
    const url = `https://api.themoviedb.org/3/movie/550?api_key=${apikey}`
    axios.get(url)
    .then(data => {
      let res = data.data;
      console.log(res);
      this.setState({
        title: res.title,
        overview: res.overview,
        poster: res.poster_path,
        vote: res.vote_average

      })
    })
    .catch(err => {
      console.log('error')
    })
  }

  render() {
    console.log(this.state.poster);
    return (
      <div className="main">
        <h1> Lets see what you got</h1>
      <div name="title">
        {this.state.title}
      </div>
      <div name="overview">
        {this.state.overview}
      </div>
      <div name="poster_path">
        {this.state.poster}
      </div>
      <div name="vote_average">
        Vote:{this.state.vote}
      </div>
        <button onClick={this.getFilm}>Get Movie</button>
      </div>

    );
  }
}

export default App;
reactjs
1个回答
0
投票
movieID(){
  var maxNumber = 284054;
  var randomNumber = Math.floor((math.random()* maxNumber )+1);
  return randomNumber
}


getFilm = () => {
    const newMovieId = this.movieID()
    const url = `https://api.themoviedb.org/3/movie/${newMovieId}?api_key=${apikey}`
    axios.get(url)
    .then(data => {
      let res = data.data;
      console.log(res);
      this.setState({
        title: res.title,
        overview: res.overview,
        poster: res.poster_path,
        vote: res.vote_average

      })
    })
    .catch(err => {
      console.log('error')
    })
  }

这应该可以帮助您解决问题。你没有正确宣布这个功能,也没有调用它。希望这可以帮助

© www.soinside.com 2019 - 2024. All rights reserved.