Can't manage to fetch response (React) - reactjs

Question

I Have tried various combinations of this, and none works. Any idea?
handleSubmit(event) {
let newsletter = 'https://domain.us0.list-manage.com/subscribe/post-json?u=00000&id=00000';
let email = '&EMAIL=' + this.state.value;
fetch(newsletter + email, {
mode: 'no-cors',
})
.then(function(response) {
return response.json().then(data => this.setState({message: data.msg}));
});
console.log(this.state.message);
console.log(this.state.value);
event.preventDefault();
}
The error I get is:
Uncaught (in promise) SyntaxError: Unexpected end of input
at App.js:35
at <anonymous>
In the network tab, everything looks right. I'm getting the following response:
{"result":"error","msg":"user#gmail.com is already subscribed to list."}

Answer 1

I would structure and use Promises differently, you can simply do as follows and make your code more readable:
handleSubmit(event) {
event.preventDefault();
let newsletter = 'https://domain.us0.list-manage.com/subscribe/post-json?u=00000&id=00000';
let email = `&EMAIL=${this.state.value}`;
fetch(`${newsletter}${email}`, { method: 'GET', mode: 'no-cors' })
.then(response => response.json())
.then(data => {
// Here you can also handle errors
if (data.result === 'error') {
// Handle Error
} else {
this.setState({ message: data.msg });
}
console.log(this.state.message);
console.log(this.state.value);
})
.catch(err => console.log(err));
// Keep in mind that these console statements might
// execute before your Promise is resolved, thus
// referring to the state before the request
// has been fulfilled. For this reason I commented them out
// console.log(this.state.message);
// console.log(this.state.value);
}
I noticed you used a mixture of function and =>, so I would suggest to pick one of the two unless you have a specific reason to use one or the other.
I fear that the fact that you use function the first time creates a new context so that this now refers to whatever this is inside the function where you convert to json, since you don't want to create a new context in this scenario, stick with arrow functions.
This is the kind of approach I usually follow when handling AJAX requests, since the first .then is returning a Promise you can chain another .then that will work on the result of the previous one. It's easier to read and to debug.