error on fetching api in reactjs

Question

I am fetching api using api key and data from input box , I am getting error array that query must be provided. I am able to get data from inputbox. Below is the code.

class App extends Component {
  constructor() {
    super()
    this.state = { movie: '', movieList: [] };
    this.onGetMovie = this.onGetMovie.bind(this);
  }

  onGetMovie(data) {
    this.setState({ movie: data });
    console.log("--------");
  }

  componentDidMount() {
    console.log("*************");
    fetch('https://api.themoviedb.org/3/search/movie?query=' + this.state.movie + '&api_key='+API_KEY)
      .then(res => res.json())
      .then(movieList => {
        this.setState({ movieList: movieList.results });
        console.log(movieList);
      })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={icons} className="App-logo" alt="logo" />
          <h1 className="App-title">
            Movies<span className="secondary">Db</span>
          </h1>
        </header>

        <SearchBar handleToParent={this.onGetMovie} />
        <p>Parent : {this.state.movie}</p>

      </div>
    );
  }
}

export default App;

Can you show us the exact error? Or it's somehow confidential? — Leo Odishvili
– Leo Odishvili, Commented Aug 9, 2018 at 7:56
it is asking for query as you are not setting it as your fetchApi is being called in the componentDidMount() will be called right after the component have been rendered please take a look at the componentDidMount() docs. — vikscool
– vikscool, Commented Aug 9, 2018 at 7:57
{errors: Array(1)} errors : ["query must be provided"] proto : Object — Abhishek Konnur
– Abhishek Konnur, Commented Aug 9, 2018 at 8:05

hsz · Accepted Answer · 2018-08-09 07:57:10Z

3

movie located in component's state is not available yet for componentDidMount.

fetch should be invoked after onGetMovie is called (even by onGetMovie method) and you'll get all data required to perform the query.

answered Aug 9, 2018 at 7:57

hsz

153k63 gold badges268 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Abhishek Konnur Over a year ago

I inserted fetch inside onGetMovie() still i get same error

hsz Over a year ago

@AbhishekKonnur Do you still refer to this.state.movie ?

Abhishek Konnur Over a year ago

onGetMovie(data) { this.setState({ movie: data }); fetch('api.themoviedb.org/3/search/movie?query=' + this.state.movie + '&api_key='+API_KEY) .then(res => res.json()) .then(movieList => { this.setState({ movieList: movieList.results }); console.log(movieList); }) }

hsz Over a year ago

state is not populated synchronously, so you can't access it right after calling setState. Simply use data variable in your query URL.

Abhishek Konnur Over a year ago

Now I am able to fetch after using data in link

Collectives™ on Stack Overflow

error on fetching api in reactjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related