React Naive Dynamic host name fetch not woring

Question

I'm new to react native. I'm using fetch to get data from server. in this request url host name is dynamic.when i use it's not working. i tried lots of things none of them is working. here is my code.

registerCall = host => {
    var url = 'http://' + host + '/DashboardApi/public/SignIn';
    const username = this.state.Usrname;

    fetch(url, {
      method: 'POST',
      headers: new Headers({
        Accept: 'application/json',
        'Content-Type': 'application/json',
      }),
      body: JSON.stringify({
        username: username,
        password: this.state.password,
      }),
    })
      .then(response => {
        return response.json();
      })
      .then(result => {
        console.log(result);
        if (result == false) {
          Alert.alert('Wrong Username or Password!');
        } else {
          AsyncStorage.setItem('username', JSON.stringify(result[1]));
          this.props.navigation.navigate('Home');
        }
      })
      .catch(function(error) {
        alert('result:' + error);
      });  
};

I'm getting this error

error TypeError: Network request failed
    at EventTarget.xhr.onerror (D:\React Native\dashboard_app\node_modules\whatwg-fetch\dist\fetch.umd.js:473)
    at EventTarget.dispatchEvent (D:\React Native\dashboard_app\node_modules\event-target-shim\dist\event-target-shim.js:818)
    at EventTarget.setReadyState (D:\React Native\dashboard_app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:575)
    at EventTarget.__didCompleteResponse (D:\React Native\dashboard_app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:389)
    at D:\React Native\dashboard_app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:502
    at RCTDeviceEventEmitter.emit (D:\React Native\dashboard_app\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:189)
    at MessageQueue.__callFunction (D:\React Native\dashboard_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425)
    at D:\React Native\dashboard_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112
    at MessageQueue.__guard (D:\React Native\dashboard_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373)
    at MessageQueue.callFunctionReturnFlushedQueue (D:\React Native\dashboard_app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111)

const username = this.state.Usrname; You sure "Usrname" is the correct spelling? — Nicolai Mons Mogensen, Jul 30 '20 at 12:13
Ok. Inside you catch block please type `console.log('error', error)`. Then open the developer menu in react native and select debug. ln chrome or your debugger open dev tools and you will see the full error. Please paste that error in to your question. Also make sure that `host` is not undefined. — Mr. Robot, Jul 30 '20 at 12:14
Can you print what value you are getting in username? The complete URL should be like: https://stackoverflow.com/questions/63172776/react-naive-dynamic-host-name-fetch-not-woring — shubham, Jul 30 '20 at 12:16
@shubham url is getting like this http://192.168.100.56:92/DashboardApi/public/SignIn — Thanushka, Jul 30 '20 at 12:21

score 0 · Answer 1 · answered Jul 30 '20 at 13:33

0

instead of this

'http://' + host + '/DashboardApi/public/SignIn'

use backticks

var url = `http://$host/DashboardApi/public/SignIn`
console.log(`dynamic url = $url`)

then compare the url what you have hardcoded with the dynamic url. It's very simple

answered Jul 30 '20 at 13:33

I tried it but not working! added like this ``` var url = `http://${host}/DashboardApi/public/SignIn`; ``` – Thanushka Jul 30 '20 at 13:42
@Thanushka I can't comment so I answered. You must check whether your server takes only signed url or not. In my company we design servers to accept only signed url. Check it – Jul 30 '20 at 13:48
@Thanushka also try with `https` – Jul 30 '20 at 13:50
I tried with RestMan extention response getting correctly and when hard coded url it's working. it's not working when host name getting dynamic. – Thanushka Jul 30 '20 at 13:56
@Thanushka are you sure the harcoded and dynamic values are same. did you consoled it and cross checked properly. – Jul 30 '20 at 13:58
@Thanushka also check this https://stackoverflow.com/a/38427829/14016776 – Jul 30 '20 at 14:00
yes i checked it. i'm getting the host name from state. can that be a problem? – Thanushka Jul 30 '20 at 14:02
@Thanushka back ticks will convert anything into string. So you must only see wheather you are getting proper text value from state. – Jul 30 '20 at 14:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218899/discussion-between-thanushka-and-rock). – Thanushka Jul 30 '20 at 14:10

React Naive Dynamic host name fetch not woring

1 Answers1