CODEWITHSUNDEEP
jsonreactjsreact-nativefetch
Laney Williams
Laney Williams

Reputation: 593

React Native - Second API Call is not returning value

My problem is that my code is returning an undefined value because of my second API Call:

render(){
    const result_postid = this.state.data_one.map(function(val) {
     return val.postid;
   }).join(',');

   const result_spaceid = this.state.data_one.map(function(vall) {
    return vall.spaceid;
  }).join(',');

   //These two will receive values.

    const result_image = this.state.data_two.map(function(valll) {
      return valll.image;
    }).join(',');

   //This last one somehow will not receive value
}

Here I am fetching two APIs in the same componentDidMount:

 componentDidMount(){
     //First API Call
     fetch(`http://www.exmaple.com/React/data.php`, {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     },
   }).then((response) => response.json())
       .then((responseJson) => {
        this.setState({
          isLoading: false,
          data_one: responseJson,
          },function() {
          });


   }).catch((error) => {
     console.error(error);
   });

   // Second API Call
   fetch(`http://www.example.com/React/image_data.php`, {
   method: 'POST',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',
   },
 }).then((response) => response.json())
     .then((responseJson) => {

      this.setState({
        data_two: responseJson, 
        },function() {
        });

 }).catch((error) => {
   console.error(error);
 });

}

To confirm that it wasn't just a data response issue, I deleted the first to const (result_postid) and (result_spaceid) and the error was gone (TypeError: undefined is not a function (evaluating 'this.state.data_two.map(function(valll){return valll.image}')). The data showed successfully, but I need all 3 const to return the value. Is there a way to return all values for all 3 const?

Upvotes: 2

Views: 1236

Answers (1)

Carolina Aguilar
Carolina Aguilar

Reputation: 352

The API calls are asynchronous, when you use the values in the render function some of them do not exist until all the calls return. You should have an initial state in the constructor

constructor(props) {
   super(props);

   this.state = {
       data_one: [],
       data_two: []
   }
}

That way the values are not undefined. When the API returns the value, then the setState will trigger the render again.

Also, why do you have an empty function in the setState in the callbacks?

It should be something like 

this.setState({
    data_two: responseJson, 
});

A couple of recommendations:

  1. Use camelCase for variable naming, _ is not an usual standard in JS
  2. Move the API calls to a different file, that will help you keep the component more organized. Then from componentDidMount you just call the function to make the request.

Upvotes: 3

Related Questions