Wsrtjtyk

I'm new in react native and I guess that probably miss something very simple but I read many previous questions and did not get my answer. I'm trying to fetch POST request with my data that I can render or print in the console exactly before the fetch function but when it sent the data it is null on the server. If I try with hardcore values directly into the fetch function it works well.

export default class CreateNewPostScreen extends React.Component {

  constructor(props){

    super(props)



    this.state = {

      source: '',

      description: '',

      location: '',

      token: ''

    }

  }



  static navigationOptions = {

    title: 'Create New Post'

  }



  componentWillMount() {

    AsyncStorage.getItem("userToken").then((value) => {

      this.setState({

        //Getting data from prev screen(ProfileScreen)

        source: this.props.navigation.state.params.newPostBase64Image,

        token: value

      })

    }).done()

  }



  _fetchCreateNewPost = async () => {

    fetch(baseUrl + 'api/profile/CreateNewPost',{

      method: 'POST',

      headers: {

          'Accept': 'application/json',

          'Content-Type': 'application/json',

          Authorization: this.state.token

          },

      body: JSON.stringify({

          Date: new Date(),

          Description: this.state.description,

          Location: this.state.location,

          SourcePath: this.state.source

      }),

      })

      .then((response) => {

        console.log(response)

      })

      .catch((error) => {

        console.log(error)

    })

  }



  render() {

    return(

      <ScrollView style={{backgroundColor: 'white'}}>

        <View style={styles.agreementField}>

          <View>

            <TouchableOpacity>

              <Text style={styles.escBtn} onPress={() => this.props.navigation.navigate('Profile')}>X</Text>

            </TouchableOpacity>

          </View>

          <View>

            <TouchableOpacity onPress={this._fetchCreateNewPost}>

              <Text style={styles.acceptBtn}>✓</Text>

            </TouchableOpacity>

          </View>

        </View>

        <View style={styles.container}>

          <View style={{padding:5}}>

            <Image

              style={styles.image}

              source={{uri:`data:image/png;base64,${this.state.source}`}}

            />

          </View>

          <View style={styles.textAreaContainer} >

            <TextInput

              style={styles.textArea}

              underlineColorAndroid="transparent"

              placeholder="Type something"

              placeholderTextColor="grey"

              numberOfLines={1}

              multiline={true}

              onChangeText={(text) => this.setState({description:text})}

            />

          </View>

        </View>

        <View>

          <View>

            <TextInput

                style={styles.input}

                placeholder="Location"

                underlineColorAndroid= '#C0C0C0'

                onChangeText={(text) => this.setState({location:text})}

            />

          </View>

        </View>

      </ScrollView>

    )

  }

}

the body must be a JSON, not a string. JSON.stringify() returns a string.

I think you must change your code to this(some other things I changed):

Your _fetchCreateNewPost function:

_fetchCreateNewPost = () => {

  return fetch(baseUrl + 'api/profile/CreateNewPost',{

    method: 'POST',

    headers: {

      'Accept': 'application/json',

      'Content-Type': 'application/json',

      Authorization: this.state.token

    },

    body: {

      Date: new Date(),

      Description: this.state.description,

      Location: this.state.location,

      SourcePath: this.state.source

    },

  })

  .then(response => response.json())

  .then(data => {

    console.log(data)

  })

  .catch((error) => {

    console.log(error)

  })

}

onPress of TouchableOpacity that uses _fetchCreateNewPost:

<TouchableOpacity onPress={()=>this._fetchCreateNewPost()}>

  <Text style={styles.acceptBtn}>✓</Text>

</TouchableOpacity>