CODEWITHSUNDEEP
reactjsfetch
Puerto
Puerto

Reputation: 1134

React - I can't see my response from fetch post

Im don't think this needs a bind to see the response but I must be missing something because im getting a response back from this Fetch/post. Here is my fetch. 

 export default class Test extends Component {
constructor(props) {
super(props);
this.state = { value: '' };

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() { }

 handleChange(event) {
this.setState({ value: event.target.value });
}

 handleSubmit(event, cb) {
   event.preventDefault();

return (
  fetch('test/post', 'POST')
    .then(response => {
      if (response.status >= 400) {
        this.setState({
          value: 'error',
        });
        throw new Error('Throw Error');
      }
      console.log('REACT::RESPONSE', response.json());
      return response.json();
    })
    .then(cb)
    .catch(() => {
      this.setState({
        value: 'error cb',
      });
    })
);
  }

the post looks good. It hits my webApi, and I get a response back. Im using fiddler to view the http traffic on my dev workstation. Here is what the response message looks like in fiddler from my webApi. 

HTTP/1.1 200 OK
Date: Wed, 08 Feb 2017 22:49:27 GMT
Content-Type: application/json; charset=utf-8
Server: Kestrel
Access-Control-Allow-Origin: *
Content-Length: 16

{"name":"MyName"}

Currently MYRESPONSE:: console log just shows. 

MYRESPONSE::[object Promise]

or "MYRESPONSE::"+JSON.stringify(response) shows

MYRESPONSE::{}

Upvotes: 1

Views: 1655

Answers (1)

kbariotis
kbariotis

Reputation: 802

.json() returns a promise. You need to do .json().then(data => console.log(data))

Upvotes: 5

Related Questions