Fetch request method Get.. How i can get response with query params?

Question

  fetchArea = (e) => {
this.setState(({ area }) => ({ area: e.target.value }));
console.log(new URLSearchParams({ input: this.state.area }).toString());
fetch(
  `https://xegr-geography.herokuapp.com/places/autocomplete?` +
    new URLSearchParams({ input: this.state.area }).toString(),
  {
    method: "GET",
    mode: "no-cors",
    headers: { "Content-Type": "application/json" },
    params: { input: this.state.area },
  }
)
  .then((res) => res.json())
  .then((data) => this.setState({ data: data }))
  .catch((err) => console.log(err));

};

i am taking back "SyntaxError: Unexpected end of input" ! im trying to access this endpoint and search with an input type of 3 characters.

score 2 · Accepted Answer · answered Jun 10 '21 at 19:34

2

Not enough reputation to add a comment, but, what does the console.log output? I don't expect it to have the updated state value in it because setState doesn't happen instantly. It's batched in react. So, if you call it where you're calling it, you will not get the expected value of this.state.area in the below line.

new URLSearchParams({ input: this.state.area }).toString(),

Instead of the above, try this,

new URLSearchParams({ input: e.target.value }).toString(),

answered Jun 10 '21 at 19:34

Jay Pillai

148
8

i placed the ({input : e.target.value }) the input field is happend now instantly but i take the same error in console.. SyntaxError: Unexpected end of input i have to reach this url : curl -X GET "https://xegr-geography.herokuapp.com/places/autocomplete?input=Nafplio" – Jun 10 '21 at 19:40
i forget to mention that in my network tab i have status code 200 and object with results in response ! – Jun 10 '21 at 19:49
https://stackoverflow.com/questions/45696999/fetch-unexpected-end-of-input see this, this could possiby be because of no-cors or because the response is empty – Jay Pillai Jun 10 '21 at 20:04

Fetch request method Get.. How i can get response with query params?

1 Answers1