Fetch doesn't return value

Question

I am beginner in react and just want to interrogate a server and display its answer. I have the following code :

My React code is:

export default class AskServer extends Component {    
          interrogateServer = () => {
          fetch('https://www.-----/test.php')
            .then((response) => response.json())
            .then((responseJson) => {      
              console.log(responseJson.myText)
              return responseJson.myText
            })
            .catch((error) => {
              console.error("pb occured");
            });
          }   

          render () {
            return (
              <View >
                <Text> Answer of the server is </Text>
                <Text> {this.interrogateServer()} </Text>
              </View>
            );
          } 
        }

And on the server, in PHP is just

<?php
   $z= '{
     "myText": "hello"
   }';
   echo $z;
?>

But what is displayed is just: "Answer of the server is"

Could you explain me why the word "hello" is not displayed on screen (but is visible in console log) ?

**YOU CAN'T RETURN AN ASYNCHRONOUS CALL** [here](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) the explanation — Christian Vincenzo Traina, Oct 21 '18 at 08:29
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — glennsl, Oct 21 '18 at 11:52

ZeroCho · Accepted Answer · 2018-10-21T11:41:42.120

You have to use this.state. After fetching is done, component will re-render as this.state has changed.

class AskServer extends Component {
      state = {
         text: null,
      };    

      componentDidMount() {
          this.interrogateServer();
      }

      interrogateServer = () => {
          fetch('https://www.-----/test.php')
              .then((response) => response.json())
              .then((responseJson) => {      
                  console.log(responseJson.myText)
                  this.setState({ text: responseJson.myText })
              })
              .catch((error) => {
                  console.error("pb occured");
              });
      }   

      render () {
          return (
              <View >
                  <Text> Answer of the server is </Text>
                  <Text> {this.state.text} </Text>
              </View>
          );
      } 
}

With a componentDidMount() { this.interrogateServer(); } it works well — Me_Will, Oct 21 '18 at 08:49

Fetch doesn't return value

1 Answers1