Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

Axios Post request in React Native

$
0
0

I am new to react native and trying to post a request to an api, but I am having different results and I am not able to understand why this is happening what I am missing.

Below is the code and after that a short description is given about the code.

import { Button, TextInput } from "react-native";import axios from "axios";const SignUp = (props: any) => {const { navigation } = props;const [data, setData] = React.useState({    name: "",    checkName: false,});const handleNameChange = (val: any) => {    if (val.length !== 0) {        setData({            name: val,            checkName: true,        });    } else {        setData({            name: val,            checkName: false,        });    }};const toSend = {    name: data.name,};async function handleSubmit() {    console.log("Component Did Mount");    let axiosConfig = {        headers: {"Content-Type": "application/x-www-form-urlencoded",        },    };    axios        .post("https://cloud-api.herokuapp.com/api/users/signup",            toSend,            axiosConfig        )        .then((response) => {            console.log(response);        })        .catch((error) => {            console.log(error);        });}<TextInput    placeholder="Name"    onChange={(val: any) => handleNameChange(val)}/>;return <Button title="signUp" onPress={handleSubmit}></Button>;};export default SignUp;

I am not able to demystify this error:

If I a add concrete value to the name state like this { name: "Carla" } and do not enter any value in the text field on front end and press the button, then my request is successfully posted without warning [1] and error[2].

But when I try to use front end to enter value in text box and then sent it on a button click then this warning [1] prompts on browser console and after some time the server respond back with [2].

[1]

index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the methodisDefaultPrevented on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See react-event-pooling for more information.

[2]

Access to XMLHttpRequest at'https://cloud-api.herokuapp.com/api/users/signup' from origin'http://localhost:19006' has been blocked by CORS policy: No'Access-Control-Allow-Origin' header is present on the requested resource. SignUp.tsx:121 Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:83) xhr.js:178 POST https://cloud-api.herokuapp.com/api/users/signup net::ERR_FAILED


Viewing all articles
Browse latest Browse all 6213

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>