CODEWITHSUNDEEP
javascriptreactjsecmascript-6axios
Jon
Jon

Reputation: 313

React : Uncaught (in promise) Error: Request failed with status code 400

I am using ReactJS, I want to create pagination for my application . When I click on next button I got this error Uncaught (in promise) Error: Request failed with status code 400 . I am fetching page data through API which were built in Loopback. Can someone please help me how to solve this problem because I am new and didn't much know about ReactJS

Code

        class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

Upvotes: 2

Views: 12019

Answers (1)

Sergio Moura
Sergio Moura

Reputation: 4942

Your btnClick function:

btnClick(e) {
  const id = e.target.value;
  this.setState({
       id: id+1
    },
    () => this.getData()
  )
}

Is not going to work. e.target.value is undefined in a button and, when doing undefined + 1, you'll receive an NaN.

I believe you want to retrieve the id from the state. Which would make your function like so:

btnClick(e) {
  const { id } = this.state;
  this.setState({
       id: id+1
    },
    () => this.getData()
  )
}

Or you might want to derive your setState call from your current state, like so (and I also removed the not needed arrow function declaration):

btnClick(e) {
  this.setState(({ id }) => ({
       id: id+1
    }),
    this.getData
  )
}

Finally, you could do a sanity check on your getData function to make sure that this.state.id is actually a number -- you could use Number.isNaN().

Upvotes: 1

Related Questions