CODEWITHSUNDEEP
javascriptreactjs
firstlegagain1
firstlegagain1

Reputation: 127

Reactjs function not returning multiple values properly: TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

I know there are multiple other questions with a similar title, however, none of them answer my doubt.

I am running a react app and getting some data from backend(nodejs + Mysql). When I am running my app, this error occurs:- 

TypeError: undefined is not iterable (cannot read property 
Symbol(Symbol.iterator))

in the handleReq function. Here is the code:- 

class Requests extends Component {
    constructor(props) {
        //state and other stuff
        this.handleReq = this.handleReq.bind(this);
    }

    handleReq(jsonInput) {
        let response, expectedResponse, diff, same;
        [response, expectedResponse, diff, same] = getResponses(jsonInput[1], jsonInput[2], parseResponse);

        console.log(response);
        //doing something with variables
    }

    render(){
             return(
             //something
             );
    }
}

function getResponses(gateVal, reqType, callback) {
    fetch(`http://localhost:5000/api/getReply/${gateVal}/${reqType}`, {
    })
    .then(data => data.json())
    .then((res) => {
        var retData = res.data["replies"];
        console.log(retData);
        retData = JSON.parse(retData);
        let expectedResponse, diff, same;

        [expectedResponse, diff, same] = callback(gateVal, reqType, retData);

        console.log(expectedResponse);
        console.log(same);
        return [retData, expectedResponse, diff, same];
    });
}

Now here, I ran the Debugger with Chrome on VSCode and found that exactly at the point the get Response function was returning there was an issue. When I return getResponses as:- 

var returns = getResponses(jsonInput[1], jsonInput[2], parseResponse);
response = returns[0];
expectedResponse = returns[1];
diff = returns[2];
same = returns[3]

It shows returns is undefined. Similarly in getResponses function, nothing after return from callback runs. The 

console.log(expectedResponse);
console.log(same);

lines simply dont run.

How do I solve this issue?

Upvotes: 0

Views: 480

Answers (1)

sumit
sumit

Reputation: 129

You should explicitly return from the function otherwise function will return undefined

function getResponses(gateVal, reqType, callback) { 
//explicitly using return
   return fetch(`http://localhost:5000/api/getReply/${gateVal}/${reqType}`, {
    })  
    .then(data => data.json())
    .then((res) => {
        var retData = res.data["replies"];
        console.log(retData);
        retData = JSON.parse(retData);
        let expectedResponse, diff, same;

        [expectedResponse, diff, same] = callback(gateVal, reqType, retData);

        console.log(expectedResponse);
        console.log(same);
        return [retData, expectedResponse, diff, same];
    });
}

It will be better if you use async-await. 

 async function getResponses(gateVal, reqType, callback) { 
   const response = await fetch(`http://localhost:5000/api/getReply/${gateVal}/${reqType}`, {
        })  
   const jsonData = await response.json();

   const retData = jsonData.data["replies"];
   console.log(retData);
   retData = JSON.parse(retData);
   let expectedResponse, diff, same;

   [expectedResponse, diff, same] = callback(gateVal, reqType, retData);

   console.log(expectedResponse);
   console.log(same);
   return [retData, expectedResponse, diff, same];           
}



async function handleReq(jsonInput) {
    let response, expectedResponse, diff, same;
    [response, expectedResponse, diff, same] = await getResponses(jsonInput[1], jsonInput[2], parseResponse);

    console.log(response);
    //doing something with variables
}

Upvotes: 2

Related Questions