How to use fetch with wordpress rest API

Question

I have this code and I wanna login using the link in the fetch of this below code but I'm getting this error while clicking on the login button: JSON Parse Error: Unexpected EOF. I'm trying to use rest API for this login app.

var React = require('react');
var ReactNative = require('react-native');
var t = require('tcomb-form-native');

var {
  AppRegistry,
  AsyncStorage,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  AlertIOS,
  Image,
} = ReactNative;

var STORAGE_KEY = 'id_token';

var Form = t.form.Form;

var Person = t.struct({
  username: t.String,
  password: t.String
});

const options = {};

var AwesomeProject = React.createClass({

  async _onValueChange(item, selectedValue) {
    try {
      await AsyncStorage.setItem(item, selectedValue);
    } catch (error) {
      console.log('AsyncStorage error: ' + error.message);
    }
  },

  componentDidMount: function() {
    this._userLogin();
  },

  _userLogin: function() { 
    var value = this.refs.form.getValue();
    if (value) { // if validation fails, value will be null

      fetch("http://vowelserver.com/trades/test_autheticate/", {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: value.username, 
      password: value.password, 
    })
      }).then((response) => response.json())
      .then((responseData) => {

    this._onValueChange(STORAGE_KEY, responseData.id_token)
      }).done();
    } 
  },

  render() {
    return (
      <View style={styles.container}>
       <View style={styles.container}>
    <Image
     resizeMode="contain"
     source={{uri: 'http://res.cloudinary.com/vowelweb/image/upload/v1498114115/Logo_mqzlgt.png'}}
     style={styles.image}
    />
       </View>
    <View style={styles.row}>
      <Form
        ref="form"
        type={Person}
        options={options}
      />
    </View>  
    <View style={styles.row}>
      <TouchableHighlight style={styles.button} onPress={this._userLogin} underlayColor='#99d9f4'>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableHighlight>
    </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
 containers: {
   flex: 1,
   justifyContent: 'flex-start',
   alignItems: 'center',
   backgroundColor: 'white',
   position: 'relative',
   borderBottomWidth: 1,
 },
  title: {
    fontSize: 30,
    alignSelf: 'center',
    marginBottom: 30
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
 login: {
   flex: 1,
   backgroundColor: '#efeff2',
   alignItems: 'center',
   justifyContent: 'center',
 },
 image: {
  position: 'absolute',
  top: 0,
  bottom: 0,
  left: 30,`enter code here`
  right: 30,
 },
});

AppRegistry.registerComponent('FirstRun', () => AwesomeProject);

Answer 1

This line...

(response) => response.json()

assumes that you are getting a string that is parseable into JSON.

Try inspecting the response .

Answer 2

Pleas find the code snippet for the simple fetch api call in react.make sure you have valid url which will return you the response

getMoviesFromApiAsync = () => {
    return fetch('http://droidtute.com/reactexample/sample_api/getMovieList.php')
      .then((response) => response.json())
      .then((responseJson) => {
       // alert(JSON.stringify(responseJson))
        this.setState({ moviesList: responseJson.movieList }) // this will update state to re-render ui
        return responseJson.movieList;
      })
      .catch((error) => {
        console.error(error);
      });
  }